<template>
  <PageWrapper :contentStyle="{ margin: '0 10px 10px 10px' }">
    <div class="px-3 pb-3 no-select">
      <div class="flex-1 gameSortBox">
        <div class="mt-4 mb-3">
          <Tabs
            v-model:activeKey="languageModal"
            @change="clickTab(languageModal)"
            class="capsule_tap"
          >
            <TabPane
              v-for="(item, index) in langrageArr"
              :disabled="PAGE_EDIT && languageModal != item.value"
              :tab="item.label"
              :key="item.value"
            />
          </Tabs>
        </div>
      </div>
      <div class="flex-1 gameSortBox">
        <div class="m-y-3">
          <Tabs
            v-model:activeKey="currentTopIndex"
            @change="handleClickTopNav(currentTopIndex)"
            class="capsule_tap"
          >
            <TabPane v-for="(item, index) in topNavList" :tab="item.value" :key="index" />
          </Tabs>
        </div>
      </div>

      <div class="flex-1 gameSortBox">
        <div class="m-y-3">
          <Tabs
            v-model:activeKey="firstNavIndex"
            @change="firstHandle(firstNavIndex)"
            class="capsule_tap"
          >
            <TabPane v-for="(item, index) in firstNavs" :tab="item.value" :key="index" />
          </Tabs>
        </div>
      </div>
      <div class="flex">
        <div>
          <!-- 大厅导航 -->
          <div
            class="!min-h-4 mb-16px sxjuz_j"
            v-if="currentTopIndex === 0 && firstNavIndex === 0"
            :class="[bigClassOrSmall ? 'lobbylistBGBig' : 'lobbylistBG']"
          >
            <label class="text-left gameSortLabel"
              >{{ $t('table.system.system_sort_hall') }}:</label
            >
            <div class="">
              <!-- <DragSelectGroup
              item-key="id"
              suffix="move"
              :isLogo="true"
              :showAddIcon="false"
              :showPrefixIcon="PAGE_EDIT"
              :showSuffixIcon="PAGE_EDIT"
              :showCloseIcon="PAGE_EDIT"
              :activation="false"
              :draggableList="lobbyArray"
            /> -->
              <DragSelectGroup
                item-key="id"
                suffix="move"
                :isLogo="true"
                :activation="true"
                :move="disabledMove"
                :end="addFunc"
                :dragDisabled="!disabledLangrage"
                class="group-nav mr-2 flex nav-list 大厅导航"
                :group="{ name: 'moveBox', pull: false, put: true }"
                :showPrefixIcon="PAGE_EDIT"
                :showSuffixIcon="PAGE_EDIT"
                :showAddIcon="false"
                :showCloseIcon="PAGE_EDIT"
                :currentIndex="currentIndexLitems"
                @change="
                  (data) =>
                    handleChangeMoveBox1(
                      data,
                      categoryList[currentTopIndex]?.navs
                        ? categoryList[currentTopIndex]?.navs
                        : [],
                      getListNavsLitems(getNavElementId),
                      '大厅导航',
                    )
                "
                :draggableList="
                  categoryList[currentTopIndex]?.navs ? categoryList[currentTopIndex]?.navs : []
                "
                @click:add="handleAddCategory"
                @click:del="
                  (index) => handleDelete(index, categoryList[currentTopIndex]?.navs, '大厅导航')
                "
                @click:tag="handleCategoryNav"
              />
              <p
                class="-m-35px absolute left-153px z-1 pointer-events-none"
                v-show="categoryList[currentTopIndex]?.navs.length == 1"
              >
                <Button type="dashed" danger ghost>{{ $t('common.Drag_type_f') }}</Button>
              </p>
            </div>
          </div>
          <!-- 体育 -->
          <template v-if="currentTopIndex === 1">
            <div :class="CLASS_ENUM[2].innerBox" class="resize-box">
              <DragSelectGroup
                class="flex mr-2 flex-wrap group-list"
                item-key="id"
                suffix="move"
                group="moveBox"
                :activation="false"
                :showPrefixIcon="PAGE_EDIT"
                :showSuffixIcon="PAGE_EDIT"
                :showAddIcon="false"
                :showCloseIcon="false"
                :draggableList="topNavList[currentTopIndex].items"
                @change="(el) => handleChangeMoveBox(el, topNavList[currentTopIndex].items)"
                @click:del="(index) => handleDelete(index, topNavList[currentTopIndex].items)"
              />
            </div>
          </template>
          <!-- 大厅列表-导航列表 -->
          <template v-if="currentTopIndex === 0 && firstNavIndex === 1">
            <div
              class="mb-16px mt-0px sxjuz_j"
              :class="[bigClassOrSmall ? 'lobbylistBGBig' : 'lobbylistBG']"
            >
              <label class="!min-h-4 text-left gameSortLabel">
                {{ $t('table.system.system_sort_hallList') }}:</label
              >
              <div>
                <DragSelectGroup
                  class="flex mr-2 flex-wrap group-list lobby-list"
                  :class="
                    categoryList[currentTopIndex]?.litems.length == 0
                      ? 'opacity0 relative z-11 w-800px'
                      : ''
                  "
                  item-key="id"
                  suffix="move"
                  :dragDisabled="!disabledLangrage"
                  :isLogo="true"
                  :end="addFunc"
                  :move="disabledMove"
                  :group="{ name: 'moveBox', pull: false, put: true }"
                  :showPrefixIcon="PAGE_EDIT"
                  :showSuffixIcon="PAGE_EDIT"
                  :showCloseIcon="PAGE_EDIT && Number(currentTopIndex) !== 2"
                  :showAddIcon="false"
                  :activation="true"
                  :currentIndex="currentIndexNaveItems"
                  @change="() => (isChange = true)"
                  :draggableList="
                    categoryList[currentTopIndex]?.litems
                      ? categoryList[currentTopIndex]?.litems
                      : []
                  "
                  @click:del="
                    (index) =>
                      handleDelete(
                        index,
                        categoryList[currentTopIndex]?.litems,
                        '大厅导航,大厅列表导航列表',
                      )
                  "
                  @click:tag="handleCategoryNavItems"
                />
                <p
                  class="-m-35px absolute left-153px z-1 pointer-events-none"
                  v-show="categoryList[currentTopIndex]?.litems.length == 0"
                >
                  <Button type="dashed" danger ghost>{{ $t('common.Drag_type_f') }}</Button>
                </p>
              </div>
            </div>
          </template>
          <!-- 侧边栏 -->
          <template v-if="currentTopIndex === 0 && firstNavIndex === 2">
            <div class="mb-4 sxjuz_j" :class="[bigClassOrSmall ? 'lobbylistBGBig' : 'lobbylistBG']">
              <label class="text-left gameSortLabel mr-2.5 flex100"
                >{{ $t('table.system.system_sort_sliader') }}:</label
              >
              <div class="flex items-center flex-wrap flex-1">
                <DragSelectGroup
                  class="flex mr-2 flex-wrap group-list grayness"
                  :class="
                    categoryList[currentTopIndex]?.sidebars == 0
                      ? 'opacity0 relative z-11 w-800px'
                      : ''
                  "
                  item-key="id"
                  suffix="move"
                  :isLogo="true"
                  :dragDisabled="!disabledLangrage"
                  :showPrefixIcon="PAGE_EDIT"
                  :showSuffixIcon="PAGE_EDIT"
                  :showAddIcon="false"
                  :move="disabledMove"
                  :activation="false"
                  :currentIndex="sidebarIndex"
                  :group="{ name: 'moveBox', pull: false, put: true }"
                  :showCloseIcon="PAGE_EDIT"
                  :draggableList="
                    categoryList[currentTopIndex]?.sidebars
                      ? categoryList[currentTopIndex]?.sidebars
                      : []
                  "
                  @click:del="
                    (index) =>
                      handleDelete(index, categoryList[currentTopIndex].sidebars, '大厅导航')
                  "
                />
                <p
                  class="-m-38px absolute -mt-35px left-174px z-1 pointer-events-none"
                  v-show="categoryList[currentTopIndex]?.sidebars == 0"
                >
                  <Button type="dashed" danger ghost>{{ $t('common.Drag_type_f') }}</Button>
                </p>
              </div>
            </div>
          </template>
          <!-- {{
            'currentCategoryIndex:---' +
            currentCategoryIndex +
            '-------getListNavsLitems:---' +
            getListNavsLitems(getNavElementId)[currentIndexNaveItems]?.ty +
            '--getNavesgame_type--' +
            getNavesgame_type +
            '---xxxxxxcurrentLobbyIndex:---' +
            currentLobbyIndex +
            '--currentIndexNaveItems' +
            currentIndexNaveItems
          }} -->
          <!-- 导航 分类列表 -->
          <template
            v-if="
              currentNavIndex != 5 &&
              firstNavIndex === 0 &&
              currentCategoryCompanyIndex != 0 &&
              sidebarIndexRecommended != 0 &&
              !currentCategoryIndex &&
              currentCategoryIndex != 0 &&
              (PAGE_EDIT || (!PAGE_EDIT && getListNavsLitems(getNavElementId).length > 0)) &&
              (getListNavsLitems(getNavElementId)[currentIndexNaveItems]?.ty == 2 ||
                !getNavesgame_type)
            "
          >
            <div
              class="mb-16px m-t-3 sxjuz_j"
              :class="[bigClassOrSmall ? 'lobbylistBGBig' : 'lobbylistBG']"
            >
              <label class="!min-h-4 text-left left gameSortLabel">
                {{ $t('table.system.system_cate_game1') }}：</label
              >
              <div
                class="min-w-1000px"
                :class="
                  getListNavsLitems(getNavElementId).length == 0
                    ? 'opacity0 relative z-11 w-1000px'
                    : ''
                "
              >
                <DragSelectGroup
                  class="flex mr-2 flex-wrap group-list classificate 非大厅分类列表"
                  item-key="id"
                  suffix="move"
                  :dragDisabled="!disabledLangrage"
                  :isLogo="true"
                  :move="disabledMove"
                  :group="{ name: 'moveBox', pull: false, put: true }"
                  :currentIndex="currentIndexNaveItems"
                  :showPrefixIcon="PAGE_EDIT"
                  :showSuffixIcon="PAGE_EDIT"
                  :showCloseIcon="PAGE_EDIT && Number(currentTopIndex) !== 2"
                  :showAddIcon="false"
                  :end="addFunc"
                  :activation="true"
                  @change="
                    (data) =>
                      handleChangeMoveBox1(
                        data,
                        categoryList[currentTopIndex]?.navs
                          ? categoryList[currentTopIndex]?.navs
                          : [],
                        getListNavsLitems(getNavElementId),
                        '大厅导航',
                      )
                  "
                  :draggableList="getListNavsLitems(getNavElementId)"
                  @click:del="
                    (index) =>
                      handleDelete(
                        index,
                        getListNavsLitems(getNavElementId),
                        '大厅导航,非大厅分类列表',
                      )
                  "
                  @click:tag="handleCategoryNavItems"
                />
              </div>
              <p
                v-show="getListNavsLitems(getNavElementId).length == 0"
                class="m-0 absolute left-119px z-1"
              >
                <Button type="dashed" danger ghost>{{ $t('table.system.system_cate_des') }}</Button>
              </p>
            </div>
          </template>
          <!-- {{
            'currentLobbyIndex:' +
            currentLobbyIndex +
            '--currentIndexNaveItems' +
            currentIndexNaveItems
          }} -->
          <!-- 行数配置 -->
          <template
            v-if="
              currentTopIndex === 0 &&
              Number(currentNavIndex) !== 5 &&
              Number(currentLobbyIndex) !== 5 &&
              (currentLobbyIndex || currentLobbyIndex == 0) &&
              (currentIndexNaveItems || currentIndexNaveItems == 0) &&
              firstNavIndex != 2
            "
          >
            <div
              class="!p-0 !pt-3px mb-4 overflow-y-auto resize-box"
              :class="[bigClassOrSmall ? 'lobbylistBGBig' : 'lobbylistBG']"
            >
              <div class="mt-8px text-left left">
                <label class="w-22 text-left !ml-10px gameSortLabel"
                  >{{ $t('table.system.system_sort_sliader_side') }}：</label
                >
              </div>
              <div class="m-l-1 sxjuz_j relative lineSort_relative">
                <DragSelectGroup
                  class="flex mr-2 flex-wrap lineSort_m unforbid flex1"
                  item-key="id"
                  :currentIndex="getSelectLobbyIndex"
                  :showPrefixIcon="false"
                  :showSuffixIcon="false"
                  :showAddIcon="PAGE_EDIT && getListByIdNavs(currentLobbyIndex)?.length < 16"
                  :showCloseIcon="PAGE_EDIT"
                  :lastClose="true"
                  :activation="true"
                  :topPadding="true"
                  :dragDisabled="true"
                  :selectWidth="'150px'"
                  :subTitle="true"
                  :draggableList="getListByIdNavs(currentLobbyIndex) || []"
                  @click:tag="navColRow"
                  @click:add="addIconCol"
                  @click:del="(index) => handleDeleteRow(index, getListByIdNavs(currentLobbyIndex))"
                />
                <div class="right-10px">
                  <svg
                    v-if="PAGE_EDIT"
                    @click="handleRmoveRow"
                    xmlns="http://www.w3.org/2000/svg"
                    width="18"
                    height="18"
                    viewBox="0 0 18 18"
                    fill="none"
                  >
                    <path
                      d="M3.9684 14.7169L3.9678 14.6234C3.9678 14.6552 3.96804 14.6863 3.9684 14.7169ZM10.9956 4.05933C10.5636 4.05933 10.2134 4.40915 10.2134 4.8415L10.2207 14.6493C10.2207 15.0809 10.5709 15.4315 11.0028 15.4315C11.4348 15.4315 11.785 15.0809 11.785 14.6493L11.7782 4.8415C11.7782 4.40917 11.428 4.05933 10.9956 4.05933ZM16.4457 1.73646L10.2173 1.73936L10.2138 0.930627C10.2138 0.49828 9.86356 0.148438 9.43125 0.148438C9.28879 0.148438 9.15534 0.186692 9.04028 0.253206C8.92516 0.186692 8.79165 0.148438 8.64904 0.148438C8.2171 0.148438 7.86687 0.49828 7.86687 0.930627L7.87055 1.74046L3.3761 1.74254C3.31304 1.72615 3.24693 1.71739 3.17875 1.71739C3.11034 1.71739 3.044 1.72623 2.98077 1.74272L1.55367 1.74338C1.12173 1.74338 0.771484 2.09398 0.771484 2.52555C0.771484 2.95789 1.12171 3.30774 1.55367 3.30774L2.39696 3.30734L2.40268 15.3758H2.40384V16.2068C2.40384 17.0708 3.10428 17.7712 3.9682 17.7712H4.75039V17.7771L13.3544 17.7721V17.7712H14.1365C14.9893 17.7712 15.6824 17.0886 15.7001 16.24L15.6937 4.84609C15.6937 4.41377 15.3435 4.06392 14.9115 4.06392C14.4795 4.06392 14.1293 4.41377 14.1293 4.84609L14.1349 14.7938C14.1074 15.9718 13.7718 16.1877 12.5725 16.1877L13.3846 16.2077L4.50875 16.2129L5.53216 16.1877C4.30725 16.1877 3.98323 15.9627 3.9684 14.7169L3.97803 16.2132H3.96742L3.9613 3.30658L8.58675 3.30444C8.60967 3.30646 8.63285 3.30769 8.6563 3.30769C8.68004 3.30769 8.70349 3.30646 8.72669 3.30438L9.36418 3.30408C9.38866 3.3064 9.41342 3.30769 9.43851 3.30769C9.46389 3.30769 9.48895 3.30638 9.51374 3.30402L16.4456 3.30082C16.8776 3.30082 17.2279 2.95098 17.2279 2.51865C17.2279 2.0863 16.8776 1.73646 16.4457 1.73646ZM14.135 14.9237L14.1357 16.2072H14.1267L14.135 14.9237ZM7.0847 4.05933C6.65274 4.05933 6.30251 4.40915 6.30251 4.8415L6.30977 14.6493C6.30977 15.0809 6.65999 15.4315 7.09198 15.4315C7.52393 15.4315 7.87415 15.0809 7.87415 14.6493L7.86689 4.8415C7.86687 4.40917 7.51665 4.05933 7.0847 4.05933Z"
                      fill="#F00D0D"
                    />
                  </svg>
                  <svg
                    class="mx-15px"
                    :class="fold_row ? '' : 'rotate_180'"
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 20 20"
                    fill="none"
                    @click="change_over"
                  >
                    <path
                      d="M10.0198 5.60549C9.53935 5.60529 9.07744 5.80685 8.72939 6.16838L2.20458 12.1477C1.85829 12.4651 1.81298 13.0289 2.10361 13.4072C2.39423 13.7854 2.91064 13.8348 3.25712 13.5174L9.85751 7.4674C9.90029 7.41974 9.95868 7.39299 10.0196 7.39299C10.0806 7.39299 10.1392 7.41974 10.1817 7.4674L10.2358 7.51857L16.7819 13.5174C17.1284 13.8348 17.6448 13.7854 17.9354 13.4072C18.2261 13.0289 18.181 12.4651 17.8345 12.1477L11.3102 6.16838C10.9622 5.80685 10.5003 5.60529 10.0198 5.60549Z"
                      fill="#2F4553"
                    />
                  </svg>
                </div>
              </div>
              <Divider style="background-color: rgb(225 225 225 / 10%)" class="!mt-0px !mb-0px" />

              <div
                v-show="fold_row"
                v-for="(item, index) in getListByIdNavs(currentLobbyIndex)"
                :key="index"
              >
                <div
                  :class="
                    CLASS_ENUM[2].innerBox + ' ' + item.list.length == 0
                      ? 'opacity0 relative z-11 w-1000px '
                      : ''
                  "
                  class="rightlistBG unborder relative !p-5px !pt-14px"
                  v-show="getSelectLobbyIndex === item.pid"
                >
                  <DragSelectGroup
                    :draggableList="item.list"
                    class="flex mr-2 flex-wrap group-list pl-5px rightlistBG unborder row-config"
                    suffix="move"
                    :dragDisabled="!disabledLangrage"
                    :group="{ name: 'fixMove', pull: false, put: true }"
                    :showAddIcon="false"
                    :subTitle="true"
                    :move="disabledMove"
                    :showCloseIcon="PAGE_EDIT"
                    :showPrefixIcon="PAGE_EDIT"
                    :showSuffixIcon="PAGE_EDIT"
                    :selectWidth="'150px'"
                    :activation="false"
                    @click:del="(index) => handleDeleteRowItem(index, item.list)"
                    @change="(index) => handleChangeMoveBox1(index, item.list, '行数配置')"
                  />
                  <p
                    class="m-6px absolute left-10px z-1 top-10px pointer-events-none"
                    v-show="item.list.length == 0"
                  >
                    <Button type="dashed" danger ghost>{{ $t('common.Drag_type_all') }}</Button>
                  </p>
                </div>
              </div>
            </div>
          </template>
          <!-- {{ currentIndexLitems + '-' + currentIndexNaveItems + '-' + currentCategoryIndex }}
            分类全部游戏： -->
          <template
            v-if="
              PAGE_EDIT
                ? currentTopIndex === 0 &&
                  Number(currentNavIndex) !== 5 &&
                  Number(currentNavIndex) !== 100 &&
                  (currentIndexLitems ||
                    isNumber(currentIndexNaveItems) ||
                    isNumber(currentCategoryIndex)) &&
                  firstNavIndex != 2 &&
                  !getNavesgame_type
                : currentTopIndex === 0 &&
                  Number(currentNavIndex) !== 100 &&
                  Number(currentNavIndex) !== 5 &&
                  !currentIndexNaveItems &&
                  currentIndexNaveItems != 0 &&
                  (currentIndexLitems ||
                    isNumber(currentIndexNaveItems) ||
                    isNumber(currentCategoryIndex)) &&
                  firstNavIndex != 2 &&
                  !getNavesgame_type
            "
          >
            <div
              class="!pl-0 !pb-0 mb-4"
              :class="[bigClassOrSmall ? 'lobbylistBGBig' : 'lobbylistBG', CLASS_ENUM[2].outBox]"
            >
              <div class="!text-left pl-10px pt-9px relative">
                <label class="gameSortLabel">{{ $t('common.Categorize_all_games') }}</label>
                <div class="absolute right-10px top-14px">
                  <PlusCircleOutlined
                    @click="handleAddAllGame_row"
                    class="mr-15px add-icon"
                    v-if="
                      PAGE_EDIT &&
                      multipleSelectGame.length &&
                      currentTopIndex === 0 &&
                      Number(currentNavIndex) !== 5 &&
                      Number(currentLobbyIndex) !== 5 &&
                      (currentLobbyIndex || currentLobbyIndex == 0) &&
                      firstNavIndex != 2
                    "
                  />
                  <svg
                    v-if="PAGE_EDIT"
                    @click="handleDelAllGame"
                    xmlns="http://www.w3.org/2000/svg"
                    width="18"
                    height="18"
                    viewBox="0 0 18 18"
                    fill="none"
                  >
                    <path
                      d="M3.9684 14.7169L3.9678 14.6234C3.9678 14.6552 3.96804 14.6863 3.9684 14.7169ZM10.9956 4.05933C10.5636 4.05933 10.2134 4.40915 10.2134 4.8415L10.2207 14.6493C10.2207 15.0809 10.5709 15.4315 11.0028 15.4315C11.4348 15.4315 11.785 15.0809 11.785 14.6493L11.7782 4.8415C11.7782 4.40917 11.428 4.05933 10.9956 4.05933ZM16.4457 1.73646L10.2173 1.73936L10.2138 0.930627C10.2138 0.49828 9.86356 0.148438 9.43125 0.148438C9.28879 0.148438 9.15534 0.186692 9.04028 0.253206C8.92516 0.186692 8.79165 0.148438 8.64904 0.148438C8.2171 0.148438 7.86687 0.49828 7.86687 0.930627L7.87055 1.74046L3.3761 1.74254C3.31304 1.72615 3.24693 1.71739 3.17875 1.71739C3.11034 1.71739 3.044 1.72623 2.98077 1.74272L1.55367 1.74338C1.12173 1.74338 0.771484 2.09398 0.771484 2.52555C0.771484 2.95789 1.12171 3.30774 1.55367 3.30774L2.39696 3.30734L2.40268 15.3758H2.40384V16.2068C2.40384 17.0708 3.10428 17.7712 3.9682 17.7712H4.75039V17.7771L13.3544 17.7721V17.7712H14.1365C14.9893 17.7712 15.6824 17.0886 15.7001 16.24L15.6937 4.84609C15.6937 4.41377 15.3435 4.06392 14.9115 4.06392C14.4795 4.06392 14.1293 4.41377 14.1293 4.84609L14.1349 14.7938C14.1074 15.9718 13.7718 16.1877 12.5725 16.1877L13.3846 16.2077L4.50875 16.2129L5.53216 16.1877C4.30725 16.1877 3.98323 15.9627 3.9684 14.7169L3.97803 16.2132H3.96742L3.9613 3.30658L8.58675 3.30444C8.60967 3.30646 8.63285 3.30769 8.6563 3.30769C8.68004 3.30769 8.70349 3.30646 8.72669 3.30438L9.36418 3.30408C9.38866 3.3064 9.41342 3.30769 9.43851 3.30769C9.46389 3.30769 9.48895 3.30638 9.51374 3.30402L16.4456 3.30082C16.8776 3.30082 17.2279 2.95098 17.2279 2.51865C17.2279 2.0863 16.8776 1.73646 16.4457 1.73646ZM14.135 14.9237L14.1357 16.2072H14.1267L14.135 14.9237ZM7.0847 4.05933C6.65274 4.05933 6.30251 4.40915 6.30251 4.8415L6.30977 14.6493C6.30977 15.0809 6.65999 15.4315 7.09198 15.4315C7.52393 15.4315 7.87415 15.0809 7.87415 14.6493L7.86689 4.8415C7.86687 4.40917 7.51665 4.05933 7.0847 4.05933Z"
                      fill="#F00D0D"
                    />
                  </svg>
                  <svg
                    class="mx-15px"
                    :class="fold_game ? '' : 'rotate_180'"
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 20 20"
                    fill="none"
                    @click="change_over1"
                  >
                    <path
                      d="M10.0198 5.60549C9.53935 5.60529 9.07744 5.80685 8.72939 6.16838L2.20458 12.1477C1.85829 12.4651 1.81298 13.0289 2.10361 13.4072C2.39423 13.7854 2.91064 13.8348 3.25712 13.5174L9.85751 7.4674C9.90029 7.41974 9.95868 7.39299 10.0196 7.39299C10.0806 7.39299 10.1392 7.41974 10.1817 7.4674L10.2358 7.51857L16.7819 13.5174C17.1284 13.8348 17.6448 13.7854 17.9354 13.4072C18.2261 13.0289 18.181 12.4651 17.8345 12.1477L11.3102 6.16838C10.9622 5.80685 10.5003 5.60529 10.0198 5.60549Z"
                      fill="#2F4553"
                    />
                  </svg>
                </div>
              </div>
              <Divider
                style="background-color: rgb(225 225 225 / 10%)"
                class="!mt-10px mt-2px !mb-0"
              />
              <div
                :class="CLASS_ENUM[2].innerBox"
                class="!mt-0 unborder bg_lobbylist !pt-5 !pl-10px overflow-y-auto resize-box"
                v-show="fold_game"
                v-if="
                  PAGE_EDIT ||
                  isNumber(currentCategoryIndex) ||
                  isNumber(currentIndexLitems) ||
                  isNumber(currentIndexNaveItems)
                "
              >
                <DragSelectGroup
                  class="flex flex-wrap group-list all-game"
                  :class="{ 'box-size': getListById(currentNavIndex)?.length === 0 }"
                  item-key="id"
                  suffix="move"
                  :subTitle="true"
                  :group="{ name: 'fixMove', pull: 'clone', put: true }"
                  :selectWidth="'150px'"
                  :showPrefixIcon="PAGE_EDIT"
                  :showSuffixIcon="PAGE_EDIT"
                  :move="disabledMove"
                  :showAddIcon="false"
                  :showCloseIcon="PAGE_EDIT"
                  :activation="false"
                  :dragDisabled="!disabledLangrage"
                  :activeMultipleState="true"
                  :selectRemove="multipleSelectGame"
                  :draggableList="getListById(currentNavIndex)"
                  @click:tag="handleChildElementGame"
                  @change="
                    (index) =>
                      handleChangeMoveBox1(index, getListById(currentNavIndex), '分类全部游戏')
                  "
                  @click:del="(index) => handleDeleteAllGame(index, getListById(currentNavIndex))"
                />
                <p
                  class="m-6px absolute left-30px z-1 pointer-events-none"
                  v-show="getListById(currentNavIndex)?.length == 0"
                >
                  <Button type="dashed" danger ghost>{{ $t('common.Drag_type_p') }}</Button>
                </p>
              </div>
            </div>
          </template>
          <!--   内页推荐 -->
          <div v-show="currentNavIndex == '100'">
            <div
              class="!pl-0 overflow-y-auto resize-box relative"
              :class="[bigClassOrSmall ? 'lobbylistBGBig' : 'lobbylistBG', CLASS_ENUM[2].outBox]"
            >
              <div class="!text-left pt-5px pb-0px pl-10px mt-2px">
                <label class="gameSortLabel mr-15px"
                  >{{ $t('table.system.system_sort_sliader_side_all_lei') }}:</label
                >
                <a-button
                  class="mr-2 mb-2"
                  v-for="(item, index) in gameListRecommend"
                  :key="index"
                  :type="recommendActive == item.game_type ? 'primary' : ''"
                  size="large"
                  style="font-size: 14px"
                  @click="recommendActivehanle(item.game_type)"
                >
                  <img
                    class="base-logo w-15px h-15px mr-5px"
                    :src="getDataTypePreviewUrl(item.icon)"
                    alt=""
                  />
                  {{ gameMapping[item.game_type] }}
                </a-button>
              </div>
              <div class="absolute right-17px top-14px">
                <svg
                  v-if="PAGE_EDIT"
                  @click="handleDelAllGame"
                  xmlns="http://www.w3.org/2000/svg"
                  width="18"
                  height="18"
                  viewBox="0 0 18 18"
                  fill="none"
                >
                  <path
                    d="M3.9684 14.7169L3.9678 14.6234C3.9678 14.6552 3.96804 14.6863 3.9684 14.7169ZM10.9956 4.05933C10.5636 4.05933 10.2134 4.40915 10.2134 4.8415L10.2207 14.6493C10.2207 15.0809 10.5709 15.4315 11.0028 15.4315C11.4348 15.4315 11.785 15.0809 11.785 14.6493L11.7782 4.8415C11.7782 4.40917 11.428 4.05933 10.9956 4.05933ZM16.4457 1.73646L10.2173 1.73936L10.2138 0.930627C10.2138 0.49828 9.86356 0.148438 9.43125 0.148438C9.28879 0.148438 9.15534 0.186692 9.04028 0.253206C8.92516 0.186692 8.79165 0.148438 8.64904 0.148438C8.2171 0.148438 7.86687 0.49828 7.86687 0.930627L7.87055 1.74046L3.3761 1.74254C3.31304 1.72615 3.24693 1.71739 3.17875 1.71739C3.11034 1.71739 3.044 1.72623 2.98077 1.74272L1.55367 1.74338C1.12173 1.74338 0.771484 2.09398 0.771484 2.52555C0.771484 2.95789 1.12171 3.30774 1.55367 3.30774L2.39696 3.30734L2.40268 15.3758H2.40384V16.2068C2.40384 17.0708 3.10428 17.7712 3.9682 17.7712H4.75039V17.7771L13.3544 17.7721V17.7712H14.1365C14.9893 17.7712 15.6824 17.0886 15.7001 16.24L15.6937 4.84609C15.6937 4.41377 15.3435 4.06392 14.9115 4.06392C14.4795 4.06392 14.1293 4.41377 14.1293 4.84609L14.1349 14.7938C14.1074 15.9718 13.7718 16.1877 12.5725 16.1877L13.3846 16.2077L4.50875 16.2129L5.53216 16.1877C4.30725 16.1877 3.98323 15.9627 3.9684 14.7169L3.97803 16.2132H3.96742L3.9613 3.30658L8.58675 3.30444C8.60967 3.30646 8.63285 3.30769 8.6563 3.30769C8.68004 3.30769 8.70349 3.30646 8.72669 3.30438L9.36418 3.30408C9.38866 3.3064 9.41342 3.30769 9.43851 3.30769C9.46389 3.30769 9.48895 3.30638 9.51374 3.30402L16.4456 3.30082C16.8776 3.30082 17.2279 2.95098 17.2279 2.51865C17.2279 2.0863 16.8776 1.73646 16.4457 1.73646ZM14.135 14.9237L14.1357 16.2072H14.1267L14.135 14.9237ZM7.0847 4.05933C6.65274 4.05933 6.30251 4.40915 6.30251 4.8415L6.30977 14.6493C6.30977 15.0809 6.65999 15.4315 7.09198 15.4315C7.52393 15.4315 7.87415 15.0809 7.87415 14.6493L7.86689 4.8415C7.86687 4.40917 7.51665 4.05933 7.0847 4.05933Z"
                    fill="#F00D0D"
                  />
                </svg>
              </div>
              <Divider style="background-color: rgb(225 225 225 / 10%)" class="!mt-7px mb-10px" />
              <div :class="CLASS_ENUM[2].innerBox" class="!mt-0 unborder bg_lobbylist bg_white">
                <DragSelectGroup
                  class="flex flex-wrap group-list move-area 内页推荐"
                  :class="{ 'box-size': true }"
                  item-key="id"
                  suffix="move"
                  :group="{ name: 'fixMove', pull: 'clone', put: true }"
                  :selectWidth="'149px'"
                  :showPrefixIcon="PAGE_EDIT"
                  :showSuffixIcon="PAGE_EDIT"
                  :move="disabledMove"
                  :showAddIcon="false"
                  :showCloseIcon="PAGE_EDIT"
                  :subTitle="true"
                  :activation="false"
                  :dragDisabled="!disabledLangrage"
                  :draggableList="recommendGetListById(currentNavIndex)"
                  @change="
                    (el) =>
                      handleChangeMoveBox1(el, recommendGetListById(currentNavIndex), '内页推荐')
                  "
                  @click:del="
                    (index) =>
                      handleDelete(
                        index,
                        addmultipleSelect.length === 0
                          ? recommendGetListById(currentNavIndex)
                          : addmultipleSelect,
                        '大厅导航',
                      )
                  "
                />
              </div>
            </div>
          </div>
          <!--  {{ currentTopIndex + '--' + currentNavIndex + '--' + firstNavIndex }} -->
          <!-- 下面的游戏大类型 -->
          <div
            v-if="
              (getNavesgame_type && !PAGE_EDIT && firstNavIndex === 0) ||
              (PAGE_EDIT && currentTopIndex === 0 && Number(currentNavIndex) !== 5)
            "
            class="mt-3 !pb-0"
            :class="[bigClassOrSmall ? 'lobbylistBGBig' : 'lobbylistBG']"
          >
            <div
              class="sxjuz_j"
              v-if="getNavesgame_type || !getNavesgame_type || firstNavIndex == 2"
            >
              <label class="text-left mt-2 mb-2 gameSortLabelExtral left"
                >{{ $t('table.system.system_sort_sliader_side_site_1') }}:</label
              >
              <DragSelectGroup
                class="flex flex-wrap group-nav1 itemDrage"
                item-key="id"
                :currentIndex="currentgame_typeIndex"
                :showPrefixIcon="false"
                :showSuffixIcon="false"
                :showAddIcon="false"
                :dragDisabled="true"
                :showCloseIcon="false"
                :draggableList="plateFormAllVenues"
                @click:tag="handleClickgame_type"
              />
            </div>
            <!-- 品牌类型 -->
            <div
              v-if="
                getNavesgame_type ||
                (PAGE_EDIT &&
                  currentTopIndex === 0 &&
                  Number(currentNavIndex) !== 5 &&
                  !getNavesgame_type) ||
                firstNavIndex == 2
              "
              class="mt-10px sxjuz_j"
            >
              <label class="w-22 text-left mt-2 mb-2 gameSortLabelExtral"
                >{{ $t('table.system.system_sort_sliader_side_site_2') }}:</label
              >
              <div :class="CLASS_ENUM[3].innerBox">
                <DragSelectGroup
                  class="flex mr-2 flex-wrap brand-list"
                  item-key="id"
                  suffix="move"
                  :sort="false"
                  :move="disabledMove"
                  :group="{ name: 'fixMove', pull: 'clone', put: false }"
                  :clone="cloneGame"
                  :showPrefixIcon="PAGE_EDIT"
                  :showSuffixIcon="PAGE_EDIT"
                  :showAddIcon="false"
                  :showCloseIcon="false"
                  :activation="true"
                  :draggableList="getFirstListGame"
                  :currentIndex="getFirstListGameIndex"
                  @click:tag="handleClickPlatformFirst"
                />
                <DragSelectGroup
                  class="flex mr-2 flex-wrap brand-list"
                  item-key="id"
                  suffix="move"
                  :sort="false"
                  :move="disabledMove"
                  :group="{ name: 'fixMove', pull: 'clone', put: false }"
                  :clone="cloneGame"
                  :showPrefixIcon="PAGE_EDIT"
                  :showSuffixIcon="PAGE_EDIT"
                  :showAddIcon="false"
                  :showCloseIcon="false"
                  :activation="true"
                  :currentIndex="currentPlatformIndex"
                  :draggableList="platformList ? platformList : []"
                  @click:tag="handleClickPlatform"
                />
              </div>
            </div>
            <!-- 所有子游戏 -->
            <div
              :class="CLASS_ENUM[2].outBox"
              class=""
              v-if="currentTopIndex === 0 && Number(currentNavIndex) !== 5 && firstNavIndex != 2"
            >
              <div class="flex items-center">
                <span class="text-left mr-2 text-16px"
                  >{{ getGameTitle }} {{ $t('table.system.system_game_all') }}:</span
                >
                <a-button
                  v-if="
                    (PAGE_EDIT && firstNavIndex != 0) ||
                    (PAGE_EDIT && !getNavesgame_type && firstNavIndex == 0)
                  "
                  class="mr-2 button-bg-basic"
                  type="primary"
                  size="large"
                  @click="handleAddAllGame"
                >
                  {{ $t('table.system.system_all_insert') }}
                </a-button>
                <Input
                  v-model:value="searchGameName"
                  :allow-clear="true"
                  :placeholder="$t('table.system.system_input_gameName')"
                  style="width: 160px"
                  size="large"
                />
                <a-button
                  :loading="searchLoading"
                  class="ml-2 button-bg-basic"
                  type="primary"
                  size="large"
                  @click="handleSearchGameList"
                >
                  {{ $t('common.queryText') }}
                </a-button>
                <a-button
                  class="!m-l-5 button-bg-basic"
                  size="large"
                  type="primary"
                  v-if="multipleSelect.length > 0"
                  @click="multipleAdd"
                >
                  {{ t('table.system.system_sort_add') }}</a-button
                >
              </div>
              <div
                :class="CLASS_ENUM[2].innerBox"
                class="bg_lobbylist unborder !pb-30px overflow-y-auto pl-6px resize-box"
                style="position: relative"
                ref="listRef"
              >
                <DragSelectGroup
                  class="flex mr-2 flex-wrap group-list subgame 所有子游戏"
                  :class="plateFormAllVenues[currentgame_typeIndex]?.name + '_Venues'"
                  item-key="id"
                  :group="{
                    name: 'moveBox',
                    pull: 'clone',
                    put: false,
                  }"
                  :move="disabledMove"
                  :selectWidth="'150px'"
                  :clone="cloneGame"
                  :showPrefixIcon="false"
                  :isToolTip="true"
                  :showSuffixIcon="PAGE_EDIT"
                  :showAddIcon="false"
                  :showCloseIcon="false"
                  :activation="false"
                  :activeMultipleState="
                    getNavesgame_type ? (firstNavIndex == 1 ? true : false) : true
                  "
                  :dragDisabled="!disabledLangrage"
                  @click:tag="handleChildElement"
                  @move:changeMove="multipleSelect = []"
                  :selectRemove="multipleSelect"
                  :draggableList="gameList ? gameList : []"
                />
                <Loading :loading="searchLoading" :absolute="true" />
              </div>
            </div>
          </div>

          <!-- 品牌提供商 -->
          <template
            v-if="currentTopIndex === 0 && firstNavIndex != 2 && Number(currentNavIndex) === 5"
          >
            <div
              class="mb-16px m-t-3 sxjuz_j"
              :class="[bigClassOrSmall ? 'lobbylistBGBig' : 'lobbylistBG']"
            >
              <label class="!min-h-4 text-right left gameSortLabel">
                {{ $t('table.system.applied_port') }}：</label
              >
              <div class="min-w-1000px">
                <a-button
                  class="mr-2 my-2 left"
                  v-for="(item, index) in apply_port"
                  :key="index"
                  :type="applyportActive == item.id ? 'primary' : ''"
                  size="large"
                  style="font-size: 14px"
                  @click="applyportActivehanle(item.id)"
                >
                  {{ item.value }}
                </a-button>
              </div>
              <!-- <p
                v-show="getListNavsLitems(getNavElementId).length == 0"
                class="m-0 absolute left-119px z-1"
              >
                <Button type="dashed" danger ghost>{{ $t('table.system.system_cate_des') }}</Button>
              </p> -->
            </div>
            <div
              class="flex sxjuz_j unborder bg_lobbylist relative !pl-0"
              :class="[bigClassOrSmall ? 'lobbylistBGBig' : 'lobbylistBG', CLASS_ENUM[2].innerBox]"
            >
              <div class="text-left left">
                <label class="w-22 text-left !ml-10px gameSortLabel">展示品牌:</label>
              </div>
              <div class="m-l-1 sxjuz_j relative lineSort_relative pt-5px h-51px flex-1">
                <DragSelectGroup
                  v-show="applyportActive == 'h5'"
                  class="flex mr-2 flex-wrap lineSort_m unforbid"
                  item-key="id"
                  :currentIndex="applyportActiveRow"
                  :showPrefixIcon="false"
                  :showSuffixIcon="false"
                  :showAddIcon="PAGE_EDIT && getListByApply_port(applyportActiveRow)?.length < 5"
                  :showCloseIcon="PAGE_EDIT"
                  :lastClose="true"
                  :activation="true"
                  :topPadding="true"
                  :dragDisabled="true"
                  :selectWidth="'150px'"
                  :subTitle="true"
                  :draggableList="getListByApply_port(applyportActiveRow) || []"
                  @click:tag="navColRowApply"
                  @click:add="addIconColApply"
                  @click:del="
                    (index) => handleDeleteRowApply(index, getListByApply_port(applyportActiveRow))
                  "
                />
                <div class="absolute right-10px">
                  <svg
                    v-if="PAGE_EDIT"
                    @click="handleDelAllGame"
                    xmlns="http://www.w3.org/2000/svg"
                    width="18"
                    height="18"
                    viewBox="0 0 18 18"
                    fill="none"
                  >
                    <path
                      d="M3.9684 14.7169L3.9678 14.6234C3.9678 14.6552 3.96804 14.6863 3.9684 14.7169ZM10.9956 4.05933C10.5636 4.05933 10.2134 4.40915 10.2134 4.8415L10.2207 14.6493C10.2207 15.0809 10.5709 15.4315 11.0028 15.4315C11.4348 15.4315 11.785 15.0809 11.785 14.6493L11.7782 4.8415C11.7782 4.40917 11.428 4.05933 10.9956 4.05933ZM16.4457 1.73646L10.2173 1.73936L10.2138 0.930627C10.2138 0.49828 9.86356 0.148438 9.43125 0.148438C9.28879 0.148438 9.15534 0.186692 9.04028 0.253206C8.92516 0.186692 8.79165 0.148438 8.64904 0.148438C8.2171 0.148438 7.86687 0.49828 7.86687 0.930627L7.87055 1.74046L3.3761 1.74254C3.31304 1.72615 3.24693 1.71739 3.17875 1.71739C3.11034 1.71739 3.044 1.72623 2.98077 1.74272L1.55367 1.74338C1.12173 1.74338 0.771484 2.09398 0.771484 2.52555C0.771484 2.95789 1.12171 3.30774 1.55367 3.30774L2.39696 3.30734L2.40268 15.3758H2.40384V16.2068C2.40384 17.0708 3.10428 17.7712 3.9682 17.7712H4.75039V17.7771L13.3544 17.7721V17.7712H14.1365C14.9893 17.7712 15.6824 17.0886 15.7001 16.24L15.6937 4.84609C15.6937 4.41377 15.3435 4.06392 14.9115 4.06392C14.4795 4.06392 14.1293 4.41377 14.1293 4.84609L14.1349 14.7938C14.1074 15.9718 13.7718 16.1877 12.5725 16.1877L13.3846 16.2077L4.50875 16.2129L5.53216 16.1877C4.30725 16.1877 3.98323 15.9627 3.9684 14.7169L3.97803 16.2132H3.96742L3.9613 3.30658L8.58675 3.30444C8.60967 3.30646 8.63285 3.30769 8.6563 3.30769C8.68004 3.30769 8.70349 3.30646 8.72669 3.30438L9.36418 3.30408C9.38866 3.3064 9.41342 3.30769 9.43851 3.30769C9.46389 3.30769 9.48895 3.30638 9.51374 3.30402L16.4456 3.30082C16.8776 3.30082 17.2279 2.95098 17.2279 2.51865C17.2279 2.0863 16.8776 1.73646 16.4457 1.73646ZM14.135 14.9237L14.1357 16.2072H14.1267L14.135 14.9237ZM7.0847 4.05933C6.65274 4.05933 6.30251 4.40915 6.30251 4.8415L6.30977 14.6493C6.30977 15.0809 6.65999 15.4315 7.09198 15.4315C7.52393 15.4315 7.87415 15.0809 7.87415 14.6493L7.86689 4.8415C7.86687 4.40917 7.51665 4.05933 7.0847 4.05933Z"
                      fill="#F00D0D"
                    />
                  </svg>
                </div>
              </div>
              <Divider style="background-color: rgb(225 225 225 / 10%)" class="!mt-0px !mb-0px" />

              <div class="!text-left p-10px flex-1">
                <DragSelectGroup
                  class="flex mr-2 flex-wrap group-list 展示品牌"
                  :showPrefixIcon="PAGE_EDIT"
                  :showAddIcon="false"
                  :isLogo="true"
                  :move="disabledMove"
                  :group="{
                    name: 'moveBox',
                    pull: false,
                    put: true,
                  }"
                  :showCloseIcon="PAGE_EDIT"
                  :showSuffixIcon="PAGE_EDIT"
                  :selectWidth="'159px'"
                  :activation="false"
                  :dragDisabled="!disabledLangrage"
                  :categoryId="currentNavIndex"
                  :draggableList="getListByApply_port(applyportActiveRow)[applyportActiveRow].list"
                  @click:del="
                    (index) =>
                      handleDelete(
                        index,
                        getListByApply_port(applyportActiveRow)[applyportActiveRow].list,
                      )
                  "
                />
              </div>
            </div>
          </template>
          <!-- 全部品牌 -->
          <template
            v-if="
              currentTopIndex === 0 &&
              firstNavIndex != 2 &&
              PAGE_EDIT &&
              Number(currentNavIndex) == 5
            "
          >
            <div
              class="mt-3 !text-left !p-0"
              :class="[bigClassOrSmall ? 'lobbylistBGBig' : 'lobbylistBG']"
            >
              <label class="text-left px-10px pt-10px !pb-0px block gameSortLabel"
                >{{ $t('table.system.system_all_modal') }}：</label
              >
              <Divider style="background-color: #d7d7d7" class="!my-10px" />
              <!-- <Button type="primary" size="small" @click="handleAddAllBrand">全部添加</Button> -->
              <div class="flex unborder bg_lobbylist" :class="CLASS_ENUM[2].innerBox">
                <DragSelectGroup
                  :group="{
                    name: 'moveBox',
                    pull: 'clone',
                    put: false,
                  }"
                  :end="addFunc"
                  class="flex mr-2 flex-wrap group-list 全部品牌"
                  :showPrefixIcon="PAGE_EDIT"
                  :showAddIcon="false"
                  :isLogo="true"
                  :disable="PAGE_EDIT"
                  :categoryId="currentNavIndex"
                  :showCloseIcon="false"
                  :showSuffixIcon="PAGE_EDIT"
                  :selectWidth="'159px'"
                  :activation="false"
                  :draggableList="getVenuesData"
                />
              </div>
            </div>
          </template>
        </div>
        <!-- 右边游戏类别 -->
        <div class="w-484px">
          <div class="m-b-10px ml-10px rightlistBG pb-10px" v-if="currentTopIndex === 0">
            <p class="!min-h-4 text-centre leading-20px gameSortLabel !pt-15px pb-14px m-0">{{
              firstNavIndex == 0
                ? $t('table.system.system_nav_game')
                : firstNavIndex == 1
                ? $t('table.system.system_cate_game')
                : $t('common.Hall_side_sorting')
            }}</p>
            <Divider style="background-color: rgb(225 225 225 / 10%)" class="!mb-5px !mt-0" />
            <div class="flex items-center flex-wrap flex-1">
              <DragSelectGroup
                class="flex flex-wrap category-list"
                item-key="id"
                :group="{ name: 'moveBox', pull: 'clone', put: false }"
                :clone="cloneGame"
                :isLogo="true"
                :show100="true"
                suffix="move"
                :move="disabledMove"
                :end="addFunc"
                :disable="false"
                :isSort="false"
                :activation="isNumber(currentCategoryIndex) ? true : false"
                :dragDisabled="!disabledLangrage"
                :rightPadding="true"
                :showPrefixIcon="PAGE_EDIT"
                :showSuffixIcon="PAGE_EDIT"
                :showAddIcon="false"
                :draggableList="
                  firstNavIndex === 2
                    ? categoryList[currentTopIndex]?.navs.filter((item) => {
                        return item.ty == 5;
                      }) || []
                    : recreationList || []
                "
                :showCloseIcon="false"
                :selectWidth="'145px'"
                :isToolTip="true"
                :currentIndex="currentCategoryIndex"
                @click:tag="handleClickCategory"
                @click:add="handleAddCategory"
                @detete:complete="handleDelCategory"
                @edit:complete="handleCompleteCategory"
                @update:value="handleCompleteName"
                @click:del="(index) => handleNavDelete(index, recreationList)"
              />
            </div>
            <Divider
              v-if="firstNavIndex !== 2"
              style="background-color: rgb(225 225 225 / 10%)"
              class="!my-5px"
            />
            <!-- 游戏厂商 -->
            <div class="rightlistBG !p-0 flex-1" v-if="firstNavIndex !== 2">
              <p class="text-left font-medium my-5px ml-5px"> {{ $t('common.Shared_list') }}</p>
              <DragSelectGroup
                class="flex !p-0 flex-wrap 游戏厂商"
                item-key="id"
                :group="{ name: 'moveBox', pull: 'clone', put: false }"
                :clone="cloneGame"
                :isLogo="true"
                suffix="move"
                :move="disabledMove"
                :disable="false"
                :activation="true"
                :dragDisabled="!disabledLangrage"
                :showPrefixIcon="PAGE_EDIT"
                :showSuffixIcon="PAGE_EDIT"
                :showAddIcon="false"
                :showCloseIcon="false"
                :selectWidth="'149px'"
                :sixRightPadding="true"
                :draggableList="recreationListCompany"
                :currentIndex="currentCategoryCompanyIndex"
                @click:tag="handleClickCategoryCompany"
              />
            </div>
            <Divider
              style="background-color: rgb(225 225 225 / 10%)"
              v-if="firstNavIndex !== 2"
              class="!my-5px"
            />
            <!-- 内页推荐 -->
            <div class="rightlistBG !p-0" v-if="firstNavIndex !== 2">
              <p class="text-left font-medium my-5px ml-5px">
                {{ $t('common.contentpagelist') }}
              </p>
              <DragSelectGroup
                class="flex flex-wrap"
                item-key="id"
                :group="{ name: 'moveBox', pull: 'clone', put: false }"
                :clone="cloneGame"
                :isLogo="true"
                suffix="move"
                :disable="false"
                :activation="true"
                :dragDisabled="true"
                :showPrefixIcon="false"
                :showSuffixIcon="false"
                :showAddIcon="false"
                :sixRightPadding="true"
                :showCloseIcon="false"
                :selectWidth="'149px'"
                :currentIndex="sidebarIndexRecommended"
                :draggableList="gameListRecommend.length ? [gameListRecommend[0]] : []"
                @click:tag="handleClickCategoryRecommendedList"
              />
            </div>
          </div>
        </div>
        <!-- 同步语言弹框 -->
        <div class="w-68 flex justify-end absolute right-6 top-6">
          <!-- <Button
            type="primary"
            @click="handleLangrage"
            class="mr-4 button-bg-basic"
            :size="FORM_SIZE"
            preIcon="uil:setting"
            :disabled="disabledLangrage"
            >{{ $t('table.system.system_sort_language') }}</Button
          > -->
          <template v-if="PAGE_EDIT">
            <Button class="mr-2" plain @click="handleCancelSort" :size="FORM_SIZE">
              {{ $t('business.common_cancel') }}
            </Button>
            <Button
              type="primary"
              @click="handleSaveSort"
              :size="FORM_SIZE"
              :loading="saveLoadingButton"
              >{{ $t('business.comon_save') }}</Button
            >
          </template>
          <!-- 修改排序 -->
          <template v-else>
            <Button
              v-if="isHasAuth('70435')"
              plain
              class="button-bg-basic"
              type="primary"
              @click="handleEditSort"
              :size="FORM_SIZE"
              preIcon="fa-solid:user-edit"
              >{{ $t('table.system.system_edit_sort') }}</Button
            >
          </template>
        </div>
      </div>
    </div>
    <Loading :loading="saveLoading" :absolute="false" />
    <langrageModal @register="registerHandle" />
  </PageWrapper>
</template>

<script lang="ts" setup name="GameSort">
  import { ref, onBeforeMount, computed, nextTick, onMounted, watch, watchEffect } from 'vue';
  import { Input, message, RadioGroup, RadioButton, Divider, Tabs, TabPane } from 'ant-design-vue';
  import { PageWrapper } from '/@/components/Page';
  import { DragSelectGroup } from '/@/components/DragSelectGroup';
  import Loading from '/@/components/Loading/src/Loading.vue';
  import { getDataTypePreviewUrl } from '/@/utils/helper/paramsHelper';
  import { PlusCircleOutlined } from '@ant-design/icons-vue';
  import {
    getGameCategoryList,
    updateGameCategoryItem,
    updateGameCategorySports,
    updateGameCategoryIndex,
    // insertGameCategory,
    //updateGameCategory,
    delGameCategory,
    // getPlatformGames,
    getSearchGameAllList,
    getAllPlatform,
    updateCategoryName,
    getVenuesPlatform,
    getPlatformSearch,
    updateGameBacthSorting,
    getVenueAll,
    updateVenuesSort,
  } from '/@/api/sys/index';
  import { cloneDeep } from 'lodash-es';
  import { useRouter } from 'vue-router';
  import { openConfirm } from '/@/utils/confirm';
  import { isNumber } from '/@/utils/is';
  import langrageModal from './common/langrageModal.vue';
  import { useModal } from '/@/components/Modal';
  import { useFormSetting } from '/@/hooks/setting/useFormSetting';
  import { Button } from '/@/components/Button';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { langrageArr, firstNavs } from './move';
  import { Icon } from '/@/components/Icon/index';
  import { removeTabChangeListener } from '/@/logics/mitt/routeChange';
  import { useLocale } from '/@/locales/useLocale';
  import { isHasAuth } from '/@/utils/authFunction';
  import { getPlatefromAll } from '/@/api/member/index';

  const { t } = useI18n();
  const FORM_SIZE = useFormSetting().getFormSize;
  //const { getLanguageObject } = useLocale();
  const listRef = ref(null); // 游戏列表dom
  const isChange = ref(false); // 监听当前页是否有更改
  const saveLoading = ref(false); // 保存加载
  const searchLoading = ref(false); // 游戏列表加载
  const searchGameName = ref(''); // 游戏搜索名称
  const recreationList = ref<any>([]); // 娱乐城类别
  const categoryList = ref<any>([]); // 游戏类别
  const game_typeList = ref<any>([]); // 游戏类型
  const platformList = ref<any>([]); // 游戏平台列表
  const gameList = ref<any>([]); // 游戏列表
  const currentTopIndex = ref(0); // 排序修改tab下标
  const currentCategoryIndex = ref<any>(null); // 娱乐城类别tab下标
  const currentCategoryData = ref<any>(null); // 娱乐城单个类别
  const currentgame_typeIndex = ref(0); // 游戏类型tab下标
  const currentPlatformIndex = ref(null as any); // 游戏平台tab下标
  const currentPlatformData = ref<any>(null); // 游戏平台tab
  const PAGE_EDIT = ref(false as any);
  const responseAll = ref([] as any);
  const tagNameTitle = ref(' as any');
  const disabledTab = ref(false as boolean);
  const languageName = ref('en' as string);
  const plateFormAllGame = ref([] as any); //所有游戏平台
  const getVenuesData = ref([] as any); //获取游戏厂商
  const [registerHandle, { openModal }] = useModal();
  const disabledLangrage = ref(false as any);
  const hallIndex = ref(null as any);
  const hallId = ref(null as any);
  const sidebarIndex = ref(null as any);
  const sidebarId = ref(null as any);
  const currentPlatformDataId = ref('' as any);
  const plateFormState = ref(false as Boolean);
  const multipleSelect = ref([] as any);
  const addmultipleSelect = ref([] as any);
  const currentIndexLitems = ref(0);
  const firstNavIndex = ref(0 as any);
  const currentIndexNaveItems = ref(null as any);
  const recreationListCompany = ref([] as any);
  const plateFormAllVenues = ref([] as any); //品牌列表
  const recommendActive = ref(1); //品牌列表
  const getVenueId = ref(null as any);
  const getgame_type = ref('1' as any);
  //const count = ref(0 as any); //记录初始值
  //const navIndex = ref(0 as any);
  const currentNavIndex = ref('' as any);
  const getFirstListGame = ref([] as any);
  const currentLobbyIndex = ref('' as any);
  const gameListRecommend = ref([] as any);
  const getSelectLobbyIndex = ref(0 as any);
  const sidebarIndexRecommended = ref(null as any);
  const languageVal = ref('en_');
  const getNavElementId = ref('1' as any);
  const ButtonList = ref([{ label: '第一排', value: 1, list: [] }] as any);
  const radioModalRow = ref(1 as any);
  const getSelectStyle = ref(0 as any);
  const draggableListNavsList = ref([] as any);
  const tipleSelect = ref([] as any);
  const saveLoadingButton = ref(false);
  const getListChild = ref(null as any);
  const fold_row = ref(true);
  const fold_game = ref(true);
  const currentwindowWidth = ref(1673);
  const rowDeleteValue = ref(null as any);
  const getFirstListGameIndex = ref(null as any);
  const currentCategoryCompanyIndex = ref(null as any);
  const multipleSelectGame = ref([] as any);
  const getNavesgame_type = ref(false);
  const getElementName = ref('' as any);
  //const activeState = ref(false as boolean);
  const lobbyObject = ref({
    en_US: 'Lobby',
    vi_VN: 'Sảnh',
    zh_CN: '大厅',
    th_TH: 'Lobby',
    pt_BR: 'Lobby',
  });
  const languageModal = ref('zh_CN' as string);
  languageModal.value = useLocale().getLocale.value;
  const getGameTitle = computed(() => {
    if (currentPlatformIndex.value !== null) {
      return platformList.value[currentPlatformIndex.value]?.name;
    } else {
      return getFirstListGame.value[getFirstListGameIndex.value]?.name;
    }
  });
  const lobbyArray = ref([
    {
      name: '大厅',
      value: 'Lobby',
      index: 0,
      icon: '/images/CATE/lobby.webp',
      logo: '/images/CATE/lobby.webp',
      ty: 1,
      cid: '1',
      id: '1',
    },
  ] as any);
  const applyportActiveRow = ref(0);
  const applyportActive = ref('pc');
  const apply_port = ref([
    {
      value: 'PC端',
      id: 'pc',
    },
    { value: 'H5/APP端', id: 'h5' },
  ] as any);
  const applyportActivehanle = (i) => {
    applyportActive.value = i;
    applyportActiveRow.value = 0;
  };
  const gameMainClassList = ref([
    // 游戏主类
    { id: '2', value: t('table.system.system_entertainment_city'), ty: MOVE_TYPE.M },
    { id: '3', value: t('table.system.system_physical_education'), ty: MOVE_TYPE.M },
  ]);
  const $router = useRouter();

  const enum OPERATE_EVENT {
    CLOSE = 'close',
    MOVE = 'move',
    ADD = 'add',
    EDIT = 'edit',
  }

  const enum MOVE_TYPE {
    T = 1, // 游戏类别
    P = 2, // 游戏平台
    G = 3, // 游戏列表
    M = 4, // 游戏主类
  }
  const KeyOptions = {
    p1: t('table.system.system_real_person'),
    p2: t('table.member.member_fish'),
    p3: t('table.system.system_electronic'),
    p4: t('table.system.system_sport'),
    p5: '棋牌',
    p6: t('table.system.system_sports_ele'),
    p7: t('table.system.system_sports_lottery'),
    p8: t('table.system.system_original_game'),
  };
  const gameMapping: any = {
    1: t('table.system.system_real_person'),
    2: t('table.system.system_fish_get'),
    3: t('table.system.system_electronic'),
    4: t('table.system.system_physical_education'),
    5: t('table.system.system_get_chess'),
    6: t('table.system.system_sports_ele'),
    7: t('table.system.system_sports_lottery'),
    8: t('table.system.system_original_game'),
  };
  const topNavList = ref([
    // {
    //   id: 1,
    //   value: '首页',
    //   items: [],
    // },
    { id: 2, value: t('table.system.system_entertainment_city') },
    { id: 3, value: t('table.system.system_sport'), items: [] },
  ]);

  const CLASS_ENUM = {
    // 列表样式
    1: {
      outBox: 'flex items-center',
      innerBox: 'flex items-center flex-wrap flex-1',
    },
    2: {
      outBox: 'mt-3 flex flex-col',
      innerBox: 'flex w-full drag-box px-2 py-2 mt-3 items-start flex-wrap overflow-y-auto',
    },
    3: {
      outBox: 'flex flex-col',
      innerBox: 'flex items-center flex-wrap flex-1',
    },
  };
  // watch(()=> getListById(currentNavIndex.value),
  // (val)=>{
  // 	console.log(val);
  // 	val.forEach((item)=> {
  // 		item.state = false
  // 	})
  // },
  // { deep: true },
  // )
  // 所有平台 分类
  async function getPlateFormAll() {
    plateFormAllGame.value = await getAllPlatform();
    const data = await getVenueAll();
    plateFormAllVenues.value = data.map((item) => {
      return {
        ...item,
        id: item.venue_id,
        id_true: item.venue_id,
        value: item.name,
        logo: item.nav || item.logo,
      };
    });
  }
  const filteredItems = computed(() => {
    return gameList.value.filter((item, index) => {
      item._index = -1;
      if (
        searchGameName.value !== '' &&
        item.name.toLowerCase() === searchGameName.value.toLowerCase()
      ) {
        item._index = index;
        return item;
      }
    });
  });

  const setDisable = computed(() => {
    let state = false;
    if (currentCategoryIndex.value === 0) {
      //禁止拖动
      state = false;
      if (hallId.value || sidebarId.value) {
        //可以拖动
        state = true;
      } else {
        state = false;
      }
    } else if (currentCategoryIndex.value !== 0) {
      if (!hallId.value && !sidebarId.value) {
        state = true;
      }
    }
    return state;
  });
  // async function getGameList() {
  //   await getGameCategoryList({ state: 1 }).then((response) => {
  //     responseAll.value = response;
  //   });
  // }
  onBeforeMount(async () => {
    //await getCategoryIndex();
    //await getGameList();
    await getCategoryList('en_US');
    // setTimeout(async ()=> {
    // 	await	recommendActivehanle(1)
    // }, 500)
    //await getPlateFormAll();
  });
  function getListById(id) {
    let foundObject;
    foundObject = categoryList.value.find((obj) => {
      return obj.id === id;
    });
    // console.log('111foundObject', foundObject, id);
    return foundObject ? foundObject.items : [];
  }

  function recommendGetListById(id) {
    let foundObject;
    foundObject = categoryList.value.find(
      (obj) => obj.id === id && obj.game_type == recommendActive.value,
    );
    if (id == '100') {
      foundObject =
        categoryList.value.filter(
          (obj) => obj.id === id && obj.game_type == recommendActive.value,
        ) || [];
      // console.log(
      //   '111112223recommendGetListById',
      //   recommendActive.value,
      //   foundObject[0],
      //   foundObject[0].items,
      // );
      return foundObject && foundObject[0].items ? foundObject[0].items : [];
    } else {
      // console.log(categoryList.value);
      return foundObject ? foundObject.items : [];
    }
  }

  function recommendActivehanle(getgame_type) {
    recommendActive.value = getgame_type;
    const listClone = cloneDeep(recommendGetListById(currentNavIndex.value));
    console.log(listClone);
    //searchLoading.value = true;
    //getPlateFormApi();
    //checkIsMoved(OPERATE_EVENT.CLOSE, gameList.value, recommendGetListById(currentNavIndex.value));
    //if (getgame_type) {
    // checkIsMoved(
    //   OPERATE_EVENT.CLOSE,
    //   gameList.value,
    //   listClone,
    // );
    nextTick(() => {
      checkIsMoved(OPERATE_EVENT.MOVE, gameList.value, listClone);
    });

    // }
    //currentCategoryIndex.value = getgame_type;
  }
  function getListByIdNavs(id: string, type?: string): any[] {
    let foundObject;
    const currentNavObject = categoryList.value.find((obj) => obj.id == getNavElementId.value);
    foundObject = currentNavObject?.litems.find((obj) => obj.id == id);
    if (foundObject && !foundObject.item_navs) {
      foundObject.item_navs = [{ value: '第一排', id: id, list: [], pid: 0 }];
    }
    // console.log('currentNavObject1111',currentNavObject)
    // console.log('foundObject111',foundObject,id)
    if (Number(id) > 100) {
      // categoryList.value
      //   .find((obj) => obj.id == getNavElementId.value)
      //   .litems.find((obj) => obj.id == id).cid = id;
      // foundObject.cid = foundObject.id
    }
    // console.log('currentNavObject1111',categoryList.value)
    return foundObject ? foundObject.item_navs : [{ value: '第一排', id: id, list: [], pid: 0 }];
  }
  function getListByApply_port(id: any, type?: string): any[] {
    let foundObject;
    const currentNavObject = categoryList.value.find((obj) => obj.id == 5);
    foundObject = currentNavObject?.items[applyportActive.value];
    if (foundObject && !foundObject.list) {
      foundObject.list = [{ value: '第一排', id: id, list: [], pid: 0 }];
    }
    // console.log('currentNavObject1111', currentNavObject);
    // console.log('foundObject111', foundObject, id, applyportActiveRow.value);
    return foundObject ? foundObject : [{ value: '第一排', id: id, list: [], pid: 0 }];
  }
  // 导航列表
  function getListNavsLitems(id) {
    //console.log(id)
    const foundObject = categoryList.value.find((obj) => obj.id === id);
    // console.log('foundObject,id111222',foundObject,id)
    return foundObject ? foundObject.litems : [];
  }
  function clickTab(val) {
    console.log(val);
    handleClickgame_type(0);
    lobbyArray.value[0].value = lobbyObject.value[languageModal.value];
    languageName.value = val.slice(0, -2);
    if (PAGE_EDIT.value) {
      return message.error('请选择保存');
    }
    getCategoryList(val);
    firstHandle(0);
  }
  function itemsHandle(c) {
    let data: any = [];
    if (c.id === '5') {
      if (c.venue.pc) {
        c.venue.pc = c.venue.pc.map((arr, index) => {
          // const chineseDigits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
          return {
            name: `第${toChineseNumberString(index + 1)}排`,
            label: `第${toChineseNumberString(index + 1)}排`,
            value: `第${toChineseNumberString(index + 1)}排`,
            pid: index,
            list: ref(
              arr?.length
                ? arr?.map((item) => {
                    let item_data = {
                      ...item,
                      name: item.name,
                      value: item.name,
                      //logo: item.logo,
                      id: item.id,
                      logo: item.logo ? item.icon : item.icon,
                      icon: item.logo ? item.icon : item.icon,
                      state: false,
                    };
                    return item_data;
                  })
                : [],
            ),
          };
        });

        c.venue.h5 = c.venue.h5.map((arr, index) => {
          // const chineseDigits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
          return {
            name: `第${toChineseNumberString(index + 1)}排`,
            label: `第${toChineseNumberString(index + 1)}排`,
            value: `第${toChineseNumberString(index + 1)}排`,
            pid: index,
            list: ref(
              arr?.length
                ? arr?.map((item) => ({
                    ...item,
                    name: item.name,
                    value: item.name,
                    //logo: item.logo,
                    id: item.id,
                    logo: item.logo ? item.icon : item.icon,
                    icon: item.logo ? item.icon : item.icon,
                    state: false,
                  }))
                : [],
            ),
          };
        });
        data = c.venue;
      } else {
        data = {
          pc: [{ value: '第一排', id: 0, list: [], pid: 0 }],
          h5: [{ value: '第一排', id: 0, list: [], pid: 0 }],
        };
      }
      // console.log(1111,555555 ,c.id, data);
    } else {
      data =
        c.items?.map((item) => ({
          ...item,
          value: item.name ? item.name : item.value,
          ty: MOVE_TYPE.G,
          [`${languageName.value}name`]: item.name,
          name: item.name,
          logo: item.logo ? item.icon : item.icon,
          icon: item.logo ? item.icon : item.icon,
          is_hot: item.is_hot ? item.is_hot : '0',
          is_new: item.is_new ? item.is_new : '0',
          platform_name: item.platform_name ? item.platform_name : '',
          type: 'game-bottom',
        })) || [];
    }
    return data;
  }
  const PlatefromAll = ref();
  const filter_id = (item) => {
    let id = '';
    let obj = PlatefromAll.value.filter((PF_item) => {
      return PF_item.game_type == item.cid[0];
    })[0];
    id = obj?.data.filter((data_item) => {
      return data_item.id == item.cid;
    })[0]?.venue_id;
    // console.log(111, 'chushihua', item, obj);
    // console.log(111, id);
    return id;
  };
  let recreationListData: any = [];
  async function getCategoryList(val, uninfo?) {
    saveLoading.value = true;
    await getPlatefromAll().then((data) => {
      PlatefromAll.value = data;
      // console.log(111, PlatefromAll.value);
    });
    return getGameCategoryList({ lang: languageModal.value }).then((response) => {
      responseAll.value = response;
      saveLoading.value = false;
      // console.log(111,response)
      if (response[0]?.data[0].navs) {
        // response[0]?.data[0].navs.unshift(
        //     {
        //       id: "1",
        //       cid: "1",
        //       icon: "/images/CATE/provider.webp",
        //       name: "大厅",
        //       platform_id : "0",
        //       ty: 1
        //   }
        //   )
      }
      // console.log('getGameCategoryList22222',response[0]?.data[0].navs);
      console.log(response, '类别');
      categoryList.value = response[0].data.map((c, i) => {
        return {
          ...c,
          value: c.name,
          state: c.id === '1' ? true : false,
          id: c.ty == 5 ? '5_' + c.id : c.id,
          id_true: c.id,
          logo: c.icon,
          items: ref(itemsHandle(c)),
          litems: ref(
            c.litems
              ? c.litems?.map((item) => {
                  // console.log(item);
                  return {
                    ...item,
                    value: cloneDeep(item.name),
                    name:
                      item.name || Number(item.cid || item.platform_id) > 100
                        ? item.name
                        : item.name,
                    type: 'game-top',
                    id:
                      item.ty == 3
                        ? '3' + item.cid
                        : item.ty == 5
                        ? '5_' + item.cid
                        : item.platform_id === '0'
                        ? item.cid
                        : item.platform_id,
                    id_true: item.cid,
                    logo: item.logo ? item.icon : item.icon,
                    icon: item.icon ? item.icon : item.logo,
                    // ty_true: item.ty,
                    // ty: item.ty == 3 ? 2 : item.ty,
                    ty_true: c.ty == 5 && item.ty == 1 ? 5 : item.ty,
                    ty: c.ty == 5 && item.ty == 1 ? 5 : item.ty == 3 ? 2 : item.ty,
                    venue_id:
                      Number(item.cid || item.platform_id) > 100
                        ? item.venue_id != ''
                          ? item.venue_id
                          : filter_id(item)
                        : item.venue_id,
                    // venue_id:
                    //   Number(item.cid || item.platform_id) > 100 ? item.venue_id : item.venue_id,
                    is_hot: String(item.is_hot ? item.is_hot : 0),
                    is_new: String(item.is_new ? item.is_new : 0),
                    item_navs: item.item_navs?.length
                      ? item.item_navs?.map((arr, index) => {
                          const chineseDigits = [
                            '零',
                            '一',
                            '二',
                            '三',
                            '四',
                            '五',
                            '六',
                            '七',
                            '八',
                            '九',
                          ];
                          return {
                            name: `第${toChineseNumberString(index + 1)}排`,
                            label: `第${toChineseNumberString(index + 1)}排`,
                            value: `第${toChineseNumberString(index + 1)}排`,
                            pid: index,
                            list: ref(
                              arr?.length
                                ? arr?.map((item) => ({
                                    ...item,
                                    name: item.name,
                                    value: item.name,
                                    //logo: item.logo,
                                    id: item.id,
                                    logo: item.logo ? item.icon : item.icon,
                                    icon: item.logo ? item.icon : item.icon,
                                    state: false,
                                  }))
                                : [],
                            ),
                          };
                        })
                      : [{ value: '第一排', id: '1', list: [], pid: 0 }],
                  };
                })
              : [],
          ),
          navs: ref(
            c.navs
              ? c.navs?.map((item) => ({
                  ...item,
                  ty_true: item.ty,
                  ty: item.ty == 3 ? 2 : item.ty,
                  name: item.name,
                  value: item.name,
                  id:
                    item.ty == 3
                      ? '3' + item.cid
                      : item.ty == 5
                      ? '5_' + item.cid
                      : item.platform_id === '0'
                      ? item.cid
                      : item.platform_id,
                  id_true: item.cid,
                  logo: item.logo ? item.icon : item.icon,
                  icon: item.logo ? item.icon : item.icon,
                  state: item.cid === '1' ? 2 : 0,
                  type: 'game-top',
                  // venue_id: item.venue_id != '' ? item.venue_id : filter_id(item),
                  venue_id:
                    Number(item.cid || item.platform_id) > 100
                      ? item.venue_id != ''
                        ? item.venue_id
                        : filter_id(item)
                      : item.venue_id,
                  game_type: item.game_type ? item.game_type : '0',
                }))
              : [],
          ),
          sidebars: ref(
            c.sidebars
              ? c.sidebars?.map((item) => ({
                  ...item,
                  name: item.name,
                  value: item.name,
                  //logo: item.logo,
                  id:
                    item.ty == 3
                      ? '3' + item.cid
                      : item.platform_id === '0'
                      ? item.cid
                      : item.platform_id,
                  id_true: item.cid,
                  logo: item.logo ? item.icon : item.icon,
                  icon: item.logo ? item.icon : item.icon,
                  type: 'game-top',
                  ty_true: item.ty,
                  ty: item.ty == 3 ? 2 : item.ty,
                }))
              : [],
          ),
          bottoms: ref(
            c.bottoms
              ? c.bottoms?.map((item) => ({
                  ...item,
                  name: item.name,
                  value: item.name,
                  //logo: item.logo,
                  id: item.platform_id === '0' ? item.cid : item.platform_id,
                  logo: item.logo ? item.icon : item.icon,
                  icon: item.logo ? item.icon : item.icon,
                  type: 'game-top',
                }))
              : [],
          ),
          item_navs: ref([{ value: '第一排', id: '1', list: [], pid: 0 }]),
          ty: c.ty,
        };
      });
      gameListRecommend.value = categoryList.value.filter((item) => {
        return item.id === '100';
      });
      recreationListData = categoryList.value.filter(
        (item) => item.id !== '1' && item.id !== '5' && item.id !== '100',
      );
      const filterCompany = categoryList.value
        .filter((item) => item.id === '5')
        .map((item) => {
          return { ...item };
        });
      recreationListCompany.value = filterCompany;
      // console.log(111, 'firstNavIndex.value', firstNavIndex.value);
      recreationList.value = recreationListData.filter(
        (item) => item.ty == (firstNavIndex.value == 0 ? 5 : 1),
      );
      // console.log(categoryList.value[0]?.navs, 'navs');
      // console.log(currentTopIndex.value, 'currentTopIndex');
      //checkIsMoved(OPERATE_EVENT.MOVE, recreationList.value,  categoryList.value[currentTopIndex.value]?.navs);
      // firstNavIndex.value = 0;
      console.log('111categoryList.value', categoryList.value);

      if (uninfo) return;
      categoryList.value[currentTopIndex.value]?.navs != 0 &&
        handleCategoryNav(1, categoryList.value[currentTopIndex.value]?.navs[1]);
      // currentIndexNaveItems.value != 0 &&
      //   handleCategoryNavItems(0, categoryList.value[currentTopIndex.value]?.litems[0]);
    });
  }

  watch(
    () => firstNavIndex.value,
    (newV) => {
      // console.log(111, 'newV', newV);
      recreationList.value = recreationListData.filter((item) => item.ty == (newV == 0 ? 5 : 1));
    },
  );
  watch(
    () => plateFormAllVenues.value,
    (e) => {
      if (e.length) {
        // console.log(1112222, 'plateFormAllVenues', e);
        e.map((c) => {
          return {
            ...c,
            value: c.name,
            state: c.id === '1' ? true : false,
            logo: c.icon,
            items: ref(itemsHandle(c)),
            litems: ref(
              c.litems
                ? c.litems?.map((item) => {
                    // console.log(item);
                    return {
                      ...item,
                      value: cloneDeep(item.name),
                      name: item.name,
                      type: 'game-top',
                      id: item.platform_id === '0' ? item.cid : item.platform_id,
                      logo: item.logo ? item.icon : item.icon,
                      icon: item.logo ? item.icon : item.icon,
                      is_hot: String(item.is_hot ? item.is_hot : 0),
                      is_new: String(item.is_new ? item.is_new : 0),
                      item_navs: item.item_navs?.length
                        ? item.item_navs?.map((arr, index) => {
                            const chineseDigits = [
                              '零',
                              '一',
                              '二',
                              '三',
                              '四',
                              '五',
                              '六',
                              '七',
                              '八',
                              '九',
                            ];
                            return {
                              name: `第${toChineseNumberString(index + 1)}排`,
                              label: `第${toChineseNumberString(index + 1)}排`,
                              value: `第${toChineseNumberString(index + 1)}排`,
                              pid: index,
                              list: ref(
                                arr?.length
                                  ? arr?.map((item) => ({
                                      ...item,
                                      name: item.name,
                                      value: item.name,
                                      //logo: item.logo,
                                      id: item.id,
                                      logo: item.logo ? item.icon : item.icon,
                                      icon: item.logo ? item.icon : item.icon,
                                      state: false,
                                    }))
                                  : [],
                              ),
                            };
                          })
                        : [{ value: '第一排', id: '1', list: [], pid: 0 }],
                    };
                  })
                : [],
            ),
            navs: ref(
              c.navs
                ? c.navs?.map((item) => ({
                    ...item,
                    name: item.name,
                    value: item.name,
                    id: item.platform_id === '0' ? item.cid : item.platform_id,
                    logo: item.logo ? item.icon : item.icon,
                    icon: item.logo ? item.icon : item.icon,
                    state: item.cid === '1' ? 2 : 0,
                    type: 'game-top',
                    venue_id: item.venue_id ? item.venue_id : '',
                    game_type: item.game_type ? item.game_type : '0',
                  }))
                : [],
            ),
            sidebars: ref(
              c.sidebars
                ? c.sidebars?.map((item) => ({
                    ...item,
                    name: item.name,
                    value: item.name,
                    //logo: item.logo,
                    id: item.platform_id === '0' ? item.cid : item.platform_id,
                    logo: item.logo ? item.icon : item.icon,
                    icon: item.logo ? item.icon : item.icon,
                    type: 'game-top',
                  }))
                : [],
            ),
            bottoms: ref(
              c.bottoms
                ? c.bottoms?.map((item) => ({
                    ...item,
                    name: item.name,
                    value: item.name,
                    //logo: item.logo,
                    id: item.platform_id === '0' ? item.cid : item.platform_id,
                    logo: item.logo ? item.icon : item.icon,
                    icon: item.logo ? item.icon : item.icon,
                    type: 'game-top',
                  }))
                : [],
            ),
            item_navs: ref([{ value: '第一排', id: '1', list: [], pid: 0 }]),
            ty: MOVE_TYPE.T,
          };
        });
      }
    },
  );
  function firstHandle(index) {
    // console.log('index2211',categoryList.value[currentTopIndex.value]?.navs[1]);
    if (index === 0) {
      recreationList.value = recreationListData.filter((item) => item.ty == 5);
      handleCategoryNav(1, categoryList.value[currentTopIndex.value]?.navs[1]);
      checkIsMoved(
        OPERATE_EVENT.MOVE,
        platformList.value,
        categoryList.value[currentTopIndex.value]?.navs
          ? categoryList.value[currentTopIndex.value]?.navs
          : [],
        getListNavsLitems(getNavElementId.value),
      );
    }
    if (index === 1) {
      recreationList.value = recreationListData.filter((item) => item.ty == 1);
      handleCategoryNav(0, categoryList.value[currentTopIndex.value]?.navs[0]);
      categoryList.value[currentTopIndex.value]?.litems.length &&
        handleCategoryNavItems(0, categoryList.value[currentTopIndex.value]?.litems[0]);
      checkIsMoved(
        OPERATE_EVENT.MOVE,
        platformList.value,
        getListNavsLitems(getNavElementId.value),
      );
    }
    if (index === 2) {
      recreationList.value = recreationListData.filter((item) => item.ty == 5);
      handleClickgame_type(0);
      currentNavIndex.value = 0;
      checkIsMoved(
        OPERATE_EVENT.MOVE,
        platformList.value,
        categoryList.value[currentTopIndex.value]?.sidebars
          ? categoryList.value[currentTopIndex.value]?.sidebars
          : [],
      );
    }
    firstNavIndex.value = index;
  }
  function navColRow(v) {
    getSelectStyle.value = v;
    getSelectLobbyIndex.value = v;
    multipleSelectGame.value = [];
    checkIsMoved(
      OPERATE_EVENT.MOVE,
      categoryList.value.find((obj) => obj.id === currentNavIndex.value)?.items || [],
      getListByIdNavs(currentLobbyIndex.value)[getSelectLobbyIndex.value]?.list,
    );
    gameDisableReset();
  }
  function navColRowApply(v) {
    applyportActiveRow.value = v;
    // getSelectLobbyIndex.value = v;
    // multipleSelectGame.value = [];
    // checkIsMoved(
    //   OPERATE_EVENT.MOVE,
    //   categoryList.value.find((obj) => obj.id === currentNavIndex.value)?.items || [],
    //   getListByIdNavs(currentLobbyIndex.value)[getSelectLobbyIndex.value]?.list,
    // );
  }
  const current_element = ref();
  const current_Navelement = ref();
  async function handleCategoryNav(val, element, UnItems?) {
    current_Navelement.value = element = element ?? {};
    current_element.value = element = element ?? {};
    console.log('111val,handleCategoryNav element', val, element);
    currentIndexLitems.value = element?.id ? val : null;
    getNavElementId.value = element?.id;
    currentLobbyIndex.value = null;
    // currentIndexNaveItems.value = null;

    sidebarIndexRecommended.value = null;
    currentCategoryCompanyIndex.value = null;

    if (element?.id == 5) {
      currentIndexNaveItems.value = null;
      // currentLobbyIndex.value- = null;
      handleClickCategoryCompany(null, element, true);
      return;
    }
    if (element?.ty === MOVE_TYPE.P || element?.ty === 3) {
      handleInfo_game();
    } else {
      getNavesgame_type.value = false;
    }

    currentCategoryIndex.value = null;
    // currentIndexNaveItems.value = 0;
    currentNavIndex.value = element ? element?.id : '0';

    // handleCategoryNavItems(0, categoryList.value[currentTopIndex.value]?.litems[0]);
    // console.log('111122getListNavsLitems',getListNavsLitems(getNavElementId.value))
    if (element?.id == 1) {
      categoryList.value[currentTopIndex.value]?.litems.length &&
        currentIndexNaveItems.value != 0 &&
        handleCategoryNavItems(0, categoryList.value[currentTopIndex.value]?.litems[0]);
    } else {
      getListNavsLitems(getNavElementId.value).length && !UnItems
        ? handleCategoryNavItems(0, getListNavsLitems(getNavElementId.value)[0])
        : (currentIndexNaveItems.value = null);
    }
    gameDisableReset();
  }
  const forcedShow = ref(false);
  //大厅列表 分类列表点击方法
  function handleCategoryNavItems(val, element) {
    current_element.value = element;
    getSelectLobbyIndex.value = 0;
    console.log(
      111222,
      '大厅列表 分类列表点击方法 val111',
      val,
      element,
      currentIndexNaveItems.value,
    );
    if (val == currentIndexNaveItems.value) {
      //取消选中操作
      // getNavesgame_type.value = false;
      // handleCategoryNav(
      //   currentIndexLitems.value,
      //   categoryList.value[currentTopIndex.value]?.navs[currentIndexLitems.value],
      // );
      // return false;
      // currentIndexNaveItems.value = null;
      // currentLobbyIndex.value- = null;
      // console.log(element);
      // current_element.value = element;
      // // console.log('111val, element',val, element?.id)
      // currentIndexLitems.value = val;
    }

    sidebarIndexRecommended.value = null;
    currentCategoryCompanyIndex.value = null;

    // currentIndexLitems.value = null;
    // currentNavIndex.value = element ? element?.id : '0';

    currentIndexNaveItems.value = val;

    if (element && element?.id == 5) {
      // currentIndexNaveItems.value = null;
      // currentLobbyIndex.value- = null;
      handleClickCategoryCompany(null, element, true);
      return;
    }

    currentLobbyIndex.value = element?.id || element?.cid || null;
    handleClickCategory(null, null, currentLobbyIndex.value, true);
    currentCategoryIndex.value = null;
    sidebarIndexRecommended.value = null;

    if ((element && element?.ty === MOVE_TYPE.P) || element?.ty == 3) {
      handleInfo_game();
      // console.log(111, 'currentLobbyIndex.value', currentLobbyIndex.value);
    } else {
      getNavesgame_type.value = false;
      console.log('111 getNavesgame_type', getNavesgame_type.value);
    }
    checkIsMoved(
      OPERATE_EVENT.MOVE,
      categoryList.value.find((obj) => obj.id === currentNavIndex.value)?.items || [],
      getListByIdNavs(currentLobbyIndex.value)[getSelectLobbyIndex.value]?.list,
    );
    gameDisableReset();
  }
  const current_Venues = ref();
  // 场馆处理
  const handleInfo_game = async () => {
    let element = current_element.value;
    // console.log(111, 'current_element.value', current_element.value);
    if ((element && element?.ty === MOVE_TYPE.P) || element?.ty == 3) {
      //handleClickgame_type(0);
      getElementName.value = element.name;
      getNavesgame_type.value = true;
      getVenueId.value = element?.venue_id;
      //console.log(getVenueId.value)
      currentPlatformDataId.value = element?.platform_id;
      searchLoading.value = true;
      // getPlateFormApi1()
      currentgame_typeIndex.value = plateFormAllVenues.value.findIndex(
        (item) => item.venue_id === element?.venue_id,
      );
      console.log(111, 'plateFormAllVenues', getNavesgame_type.value, plateFormAllVenues.value);
      const data = plateFormAllVenues.value.find((item) => {
        return item.venue_id == element.venue_id;
      })?.data;
      console.log(data);
      //currentPlatformIndex.value = data.findIndex(item=> item.plateform_id === element?.id)
      let getIndex: any = 0;
      if (element.cid) {
        getIndex = data.findIndex((item) => item.id === (element?.id_true || element?.id));
      } else if (element?.id === '312' || element?.id === '316') {
        getIndex = data.findIndex((item) => item.id === (element?.id || element?.cid));
      } else {
        getIndex = data.findIndex((item) => item.game_type === element?.game_type);
      }
      if (element.ty_true == 3) {
        getIndex = null;
      }
      await handleClickgame_type(currentgame_typeIndex.value);
      console.log(currentgame_typeIndex.value);
      console.log(getIndex);
      // console.log(111,plateFormAllVenues.value[currentgame_typeIndex.value]);
      current_Venues.value = plateFormAllVenues.value[currentgame_typeIndex.value]?.name;
      handleClickPlatform(getIndex);

      //currentPlatformIndex.value = plateFormAllVenues.value.forEach(item=> item.data.findIndex(_i=> item.platform_id === element?.platform_id))
    } else {
      handleClickgame_type(0);
    }
  };
  watch(
    () => getNavesgame_type.value,
    (e) => {
      // console.log(111, 'getNavesgame_type watch', e);
    },
    {
      deep: true,
    },
  );
  //获取游戏厂商
  async function getVenues() {
    const response = await getVenuesPlatform();
    const dataList = response.map((res) => {
      return {
        value: res.name,
        platform_id: res.id,
        logo: res.logo,
        name: res.name,
      };
    });
    getVenuesData.value = dataList;
  }
  getVenues();
  async function getCategorySport() {
    // 体育
    const response = await getPlatformSearch({
      page: 1,
      page_size: 50,
      game_type: 4,
      maintained: 0,
      state: 1,
    });
    const dList: any = response.d;
    if (dList) {
      const list: any = dList.map((item) => {
        return {
          id: item.id,
          value: item.zh_name,
        };
      });
      topNavList.value[currentTopIndex.value].items = ref(list);
    }
  }
  //点击大厅
  async function handleClickHallCategory(index, element) {
    hallId.value = element?.id;
    hallIndex.value = index;
    currentCategoryIndex.value = 0;
    sidebarIndex.value = null;
  }
  //点击侧边栏
  async function handleSidebarCategory(index, element) {
    sidebarId.value = element?.id;
    if (sidebarId.value === 5) {
      currentNavIndex.value = String(sidebarId.value);
    }
    sidebarIndex.value = index;
    hallIndex.value = null;
    currentCategoryIndex.value = 0;
    hallId.value = null;
  }
  // function toChineseNumber(num) {
  //   const chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
  //   return chineseNumbers[num];
  // }

  function toChineseNumberString(num) {
    num = Number(num);
    const chineseNums = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
    const chineseUnits = ['', '十', '百', '千'];

    if (num === 0) {
      return chineseNums[0];
    }

    let result = '';
    let unitIndex = 0; // 用于确定 "十、百、千" 的单位

    while (num > 0) {
      const digit = num % 10;
      if (digit !== 0) {
        result = chineseNums[digit] + chineseUnits[unitIndex] + result;
      } else if (result[0] !== '零') {
        result = chineseNums[digit] + result; // 保证只添加一个 "零"
      }
      unitIndex++;
      num = Math.floor(num / 10);
    }

    // 处理 10~19 的特殊情况，如 "十一" 而不是 "一十一"
    if (result.startsWith('一十')) {
      result = result.substring(1);
    }
    // 去掉末尾的 "零"
    if (result.endsWith('零')) {
      result = result.slice(0, -1);
    }

    return result;
  }

  // function toChineseNumberString(numString) {
  //   return numString.replace(/\d/g, toChineseNumber);
  // }
  //行数点击
  function addIconCol() {
    isChange.value = true;
    // const chineseDigits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
    const labelName = `第${toChineseNumberString(
      getListByIdNavs(currentLobbyIndex.value).length + 1,
    )}排`;
    getListByIdNavs(currentLobbyIndex.value).push({
      name: labelName,
      label: labelName,
      pid: getListByIdNavs(currentLobbyIndex.value).length,
      value: labelName,
      list: [],
    });
  }
  //行数点击
  function addIconColApply() {
    isChange.value = true;
    // const chineseDigits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
    const labelName = `第${toChineseNumberString(
      getListByApply_port(applyportActiveRow).length + 1,
    )}排`;
    getListByApply_port(applyportActiveRow).push({
      name: labelName,
      label: labelName,
      pid: getListByApply_port(applyportActiveRow).length,
      value: labelName,
      list: [],
    });
  }

  function addFunc(e) {
    isChange.value = true;
    // console.log(111333, e);
    if (e.oldIndex == currentIndexLitems.value) {
      if (e.to.className.includes('nav-list')) {
        if (e.from.className.includes('nav-list')) {
          currentIndexLitems.value = e.newDraggableIndex;
        }
      }
    }
    if (e.oldIndex == currentIndexNaveItems.value) {
      if (e.to.className.includes('group-list')) {
        if (e.from.className.includes('group-list')) {
          currentIndexNaveItems.value = e.newDraggableIndex;
        }
      }
    }
    if (e.to.className.includes('nav-list')) {
      if (e.from.className.includes('nav-list') && e.oldIndex <= currentIndexLitems.value) return;
      if (e.newIndex <= currentIndexLitems.value) {
        currentIndexLitems.value = currentIndexLitems.value + 1;
      }
    }
    if (e.to.className.includes('lobby-list')) {
      if (e.from.className.includes('lobby-list') && e.oldIndex <= currentIndexNaveItems.value)
        return;
      if (e.newIndex <= currentIndexNaveItems.value) {
        currentIndexNaveItems.value = currentIndexNaveItems.value + 1;
      }
    }
    if (e.to.className.includes('非大厅分类列表')) {
      if (e.from.className.includes('非大厅分类列表') && e.oldIndex <= currentIndexNaveItems.value)
        return;
      if (e.newIndex <= currentIndexNaveItems.value) {
        currentIndexNaveItems.value = currentIndexNaveItems.value + 1;
      }
    }
  }

  function handleLangrage() {
    openModal(true, { lang: languageModal.value });
  }
  //合并两个数组的方法
  function mergeArr(arr1: any, arr2: any) {
    return arr1.map((item) => {
      const newItem = arr2.find((newItem) => newItem.lobby.lang === item.lobby.lang);
      return newItem ? newItem : item;
    });
  }
  // 拖拽 移动
  function disabledMove(e) {
    isChange.value = true;
    multipleSelectGame.value = [];
    const { from, to } = e;
    // console.log(111, '移动', e);
    // console.log(111, e.to.className);
    // console.log(111, e.from.className);
    if (e.to.className.includes('nav-list')) {
      if (e.from.className.includes('all-game')) {
        return false;
      }
    } else if (e.to.className.includes('lobby-list')) {
      if (e.from.className.includes('all-game')) {
        return false;
      }
    } else if (e.to.className.includes('classificate')) {
      if (e.from.className.includes('all-game')) {
        return false;
      }
      // if (e.form.className.includes('brand-list')) {
      //   return false;
      // }
    } else if (e.to.className.includes('all-game')) {
      if (e.from.className.includes('category-list')) {
        return false;
      }
      if (e.from.className.includes('brand-list')) {
        return false;
      }
      if (e.from.className.includes('游戏厂商')) {
        return false;
      }
      // if (Number(currentNavIndex.value) > 100) {
      //   if (!e.from.className.includes(current_Venues.value)) {
      //     return false;
      //   }
      // }
    } else if (e.to.className.includes('row-config')) {
      if (e.from.className.includes('category-list')) {
        return false;
      }
      if (e.from.className.includes('brand-list')) {
        return false;
      }
      if (e.from.className.includes('游戏厂商')) {
        return false;
      }
      if (e.from.className.includes('subgame')) {
        if (Number(currentLobbyIndex.value) > 100 || Number(currentNavIndex.value) > 100) {
          if (!e.from.className.includes(current_Venues.value)) {
            return true;
          } else {
            let draggedContextId =
              e.draggedContext.element?.id || e.draggedContext.element.platform_id;
            let exetId =
              e.relatedContext.list &&
              e.relatedContext.list.find(
                (item) => item.id == draggedContextId || item.platform_id == draggedContextId,
              );
            if (exetId) {
              if (e.draggedContext.element?.id) message.warn(t('table.system.sys_msg_1'));
              else message.warn(t('table.system.sys_msg_2'));
              return false;
            }
            return true;
          }
        }
        return false;
      }
    } else if (e.to.className.includes('内页推荐')) {
      if (e.from.className.includes('category-list')) {
        return false;
      }
      if (e.from.className.includes('brand-list')) {
        return false;
      }
      if (e.from.className.includes('游戏厂商')) {
        return false;
      }
    } else if (e.to.className.includes('展示品牌')) {
      if (e.from.className.includes('category-list')) {
        return false;
      }
      if (e.from.className.includes('brand-list')) {
        return false;
      }
      if (e.from.className.includes('游戏厂商')) {
        return false;
      }
      //禁止品牌拖动到分类列表
    }

    if (e.to.className.includes('大厅导航')) {
      if (e.from.className.includes('全部品牌')) {
        return false;
      }
    }
    if (e.to.className.includes('所有子游戏')) {
      let isLobby =
        (e.draggedContext.element.game_id == 0 && e.draggedContext.element.game_type == 1) ||
        e.draggedContext.element.name.includes('大厅');
      let fromIsLobby =
        (e.relatedContext.element.game_id == 0 && e.relatedContext.element.game_type == 1) ||
        e.relatedContext.element.name.includes('大厅');
      console.log(111, 'fromIsLobby || isLobby', fromIsLobby, isLobby);
      if (fromIsLobby || isLobby) {
        return false;
      }
    }
    if (from != to) {
      let draggedContextId = e.draggedContext.element?.id || e.draggedContext.element.platform_id;
      let exetId =
        e.relatedContext.list &&
        e.relatedContext.list.find((item) => (item.id || item.platform_id) == draggedContextId);
      // console.log(111, exetId);
      if (exetId) {
        if (e.draggedContext.element?.id) message.warn(t('table.system.sys_msg_1'));
        else message.warn(t('table.system.sys_msg_2'));
        return false;
      }
    }
    const isGameBottom =
      e.draggedContext.element && e.draggedContext.element.type === 'game-bottom';
    const isGameTop =
      e.relatedContext.list && e.relatedContext.list.find((item) => item.type == 'game-top');
    // console.log(111, e);
    if (isGameBottom && isGameTop) {
      return false;
    }

    if (e.relatedContext.element && e.relatedContext.element?.id === '1') {
      return false;
    }

    const realList = e.to.__draggable_component__.realList;
    const element = e.draggedContext.element;
    const has = realList.some((item) => (item.id || item.cid) === element?.id);
    const isSame = e.to === e.from;
    if (has && !isSame) {
      return false;
    } else {
      return true;
    }
  }
  function handleClickHall() {
    hallIndex.value = null;
    sidebarIndex.value = null;
    currentCategoryIndex.value = 0;
  }
  function gameListDisabledMove(e) {
    if (e.to === e.from) {
      return false;
    }
  }

  function resetData() {
    searchGameName.value = '';
    gameList.value = [];
  }

  const findArrayDifferences = (event, sourceList, ...otherArrays) => {
    // otherArrays[0] = JSON.parse(JSON.stringify( otherArrays[0] ));

    const addedItems: any = [];
    sourceList.forEach((item) => {
      item.state = false;
      const existsInOtherArrays = otherArrays.every((array: []) => {
        return (
          Array.isArray(array) &&
          array?.some((obj) => {
            if (event == 'CLOSE_') {
              if (obj.id == item.id) {
                // console.log('111obj.id',obj.id)
                // console.log('111item.id',item.id)
                item.state = false;
              }
              // else{
              //   item.state = true;
              // }
            } else {
              if (obj.id == item.id) {
                item.state = true;
              } else {
                item.state = false;
              }
            }
            return obj.id == item.id;
          })
        );
      });

      if (existsInOtherArrays) {
        addedItems.push(item);
      }
    });

    const removedItems = [];
    // sourceList?.filter((item) => {
    //   return otherArrays.every((array) => {
    //     return array?.some((obj) => obj.id == item.id);
    //   });
    // });
    // console.log('111 addedItems', addedItems);

    // console.log('sourceList111', sourceList);
    // console.log('otherArrayssourceList111', otherArrays);

    return {
      addedItems,
      removedItems,
    };
  };
  const handleClickCategoryRecommendedList = (index, value) => {
    getNavesgame_type.value = false;
    // console.log(111,index)
    sidebarIndexRecommended.value = index;
    currentCategoryCompanyIndex.value = null;

    currentIndexNaveItems.value = null;
    currentLobbyIndex.value = null;
    currentIndexLitems.value = null;
    currentCategoryIndex.value = null;

    //checkIsMoved(OPERATE_EVENT.MOVE, gameList.value, recommendGetListById(currentNavIndex.value));
    // handleClickCategory(null, null, value.id);
    currentNavIndex.value = value.id;

    checkIsMoved(OPERATE_EVENT.MOVE, gameList.value, recommendGetListById(currentNavIndex.value));

    console.log(gameList);
    //handleClickCategory(null, null, value.id);

    // console.log(value);
  };
  // 置灰
  const checkIsMoved = (event, sourceList, ...targetList) => {
    // console.log(event);
    // console.log(sourceList, '之前的元素,,,,');
    // sourceList.forEach((item) => {
    //   item.state = false;
    // });
    getListById(currentNavIndex.value)?.length &&
      getListById(currentNavIndex.value)?.forEach((item) => {
        item.state = false;
      });
    // console.log(targetList, '目标元素布置灰');
    const { addedItems, removedItems } = findArrayDifferences(event, sourceList, ...targetList);
    // console.log(addedItems, 'addedItems');
    // console.log(removedItems, 'removedItems');
    switch (event) {
      case OPERATE_EVENT.CLOSE:
        // console.log('111 原始的垃圾删除')
        // 删除动作时，更改游戏主类的列表状态
        sourceList.forEach((item) => {
          item.state = true;
        });
        addedItems.forEach((item) => {
          item.state = false;
        });
        break;
      case 'CLOSE_':
        // console.log('111删除全部游戏置灰的效果')
        if (getNavesgame_type.value) {
          sourceList.forEach((item) => {
            item.state = false;
          });
          setTimeout(() => {
            addedItems.forEach((item) => {
              item.state = true;
            });
          }, 111);
        } else {
          sourceList.forEach((item) => {
            item.state = true;
          });
          setTimeout(() => {
            addedItems.forEach((item) => {
              item.state = false;
            });
          }, 111);
        }
        break;
      case OPERATE_EVENT.MOVE:
        // console.log('111 添加事件')
        addedItems.forEach((item) => {
          item.state = true;
        });
        removedItems?.forEach((item) => {
          item.state = true;
        });
        //const data = cloneDeep(sourceList)
        // console.log(data)
        // data.forEach(_=> {
        // 	_.state = false
        // })
        break;
      default:
        // console.log('111 默认事件')
        sourceList.forEach((item) => {
          item.state = false;
        });
    }
  };
  function handleCompleteName(element) {
    tagNameTitle.value = element.value;
  }
  // 点击排序修改分类
  async function handleClickTopNav(index) {
    if (isChange.value) {
      handleCancelSort(index);
    } else {
      currentTopIndex.value = index;
      if (index === 1) {
        getCategorySport();
      } else {
        const keyArray = plateFormAllGame.value.map((key) => ({
          key: key.game_type,
          value: KeyOptions['p' + key.game_type],
          list: key.data,
        }));
        game_typeList.value = keyArray
          .filter((item) => item.key !== '4')
          .map((item) => {
            return { id: item.key, value: item.value, list: item.list };
          });
        handleClickCategory(0, recreationList?.value[0]);
        handleClickgame_type(0);
      }
    }
  }

  function cloneGame(data) {
    return { ...data };
  }

  // 监听移动改变事件
  function handleChangeMoveBox({ added }, ...targetList) {
    console.log(1112233443, added, targetList);
    isChange.value = true;
    if (added) {
      const { element } = added;
      console.log(element);
      switch (element?.ty) {
        // case MOVE_TYPE.T:
        //   checkIsMoved(OPERATE_EVENT.MOVE, recreationList.value, ...targetList);
        //   break;
        case MOVE_TYPE.P:
          checkIsMoved(OPERATE_EVENT.MOVE, platformList.value, ...targetList);
          break;
        case MOVE_TYPE.G:
          checkIsMoved(OPERATE_EVENT.MOVE, gameList.value, ...targetList);
          checkIsMoved(
            OPERATE_EVENT.MOVE,
            categoryList.value.find((obj) => obj.id === currentNavIndex.value)?.items || [],
            ...targetList,
          );
          break;
        case MOVE_TYPE.M:
          checkIsMoved(OPERATE_EVENT.MOVE, gameMainClassList.value, ...targetList);
          break;
        default:
          console.log('DDD');
      }
    }
  }
  //监听变化
  watch(
    () => rowDeleteValue.value,
    (val) => {
      //console.log(val)
      if (getSelectLobbyIndex.value === val) {
        getSelectLobbyIndex.value = val - 1;
      }
      navColRow(getSelectLobbyIndex.value);
    },
  );
  //
  function handleChangeMoveBox1({ added }, ...targetList) {
    console.log(111221122, added, targetList);
    isChange.value = true;
    if (added) {
      const { element } = added;
      console.log(element);
      switch (element?.ty) {
        // case MOVE_TYPE.T:
        //   checkIsMoved(OPERATE_EVENT.MOVE, recreationList.value, ...targetList);
        //   break;
        case MOVE_TYPE.P:
          if (targetList.includes('大厅导航')) {
            checkIsMoved(OPERATE_EVENT.MOVE, platformList.value, ...targetList);
            gameDisableReset();
          }
          // checkIsMoved(OPERATE_EVENT.MOVE, platformList.value, ...targetList);
          break;
        case MOVE_TYPE.G:
          if (targetList.includes('内页推荐')) {
            nextTick(() => {
              checkIsMoved(OPERATE_EVENT.MOVE, gameList.value, targetList[0]);
            });
          }
          if (targetList.includes('分类全部游戏')) {
            // setTimeout(() => {
            checkIsMoved(OPERATE_EVENT.MOVE, gameList.value, targetList[0]);
            // }, 555);
            checkIsMoved(
              OPERATE_EVENT.MOVE,
              categoryList.value.find((obj) => obj.id === currentNavIndex.value)?.items || [],
              getListByIdNavs(currentLobbyIndex.value)[getSelectLobbyIndex.value]?.list,
            );
          }
          if (targetList.includes('行数配置')) {
            checkIsMoved(OPERATE_EVENT.MOVE, getListById(currentNavIndex.value), targetList[0]);
            if (getNavesgame_type.value) {
              checkIsMoved(OPERATE_EVENT.MOVE, gameList.value, targetList[0]);
            }
          }
          break;
        case MOVE_TYPE.M:
          checkIsMoved(OPERATE_EVENT.MOVE, gameMainClassList.value, ...targetList);
          break;
        default:
          console.log('DDD');
      }
    }
  }
  //分类全部游戏
  function handleChangeMoveBoxAllGame({ added }, targetList) {
    checkIsMoved(OPERATE_EVENT.MOVE, gameList.value, targetList);
  }
  function handleChangeMoveBoxBrand({ added }, ...targetList) {
    isChange.value = true;
    if (added) {
      checkIsMoved(OPERATE_EVENT.MOVE, getVenuesData.value, ...targetList);
      //console.log(targetList, 'targetList')
    }
  }
  // 监听删除事件
  function handleDelete(index, ...targetList) {
    const element = targetList[0][index];
    // console.log(
    //   categoryList.value[currentTopIndex.value]?.navs,
    //   '111 element,currentLobbyIndex.value,targetList,index', element,currentLobbyIndex.value,targetList,index
    // );
    console.log(11122, '监听删除事件', targetList[index - 1] && targetList[index - 1][0]);
    let sourceList: any = [];
    switch (element?.ty) {
      //游戏分类删除disable
      case MOVE_TYPE.T:
        break;
      case MOVE_TYPE.P:
        sourceList = platformList.value;
        break;
      case MOVE_TYPE.G:
        sourceList = gameList.value;
        break;
      case MOVE_TYPE.M:
        sourceList = gameMainClassList.value;
        break;
    }

    if (targetList.some((item) => item.includes('大厅导航'))) {
      if (targetList.includes('大厅导航')) {
        // console.log('111 大厅导航',currentIndexLitems.value ,index, element?.id ,targetList[0][index-1])
        if (getNavElementId.value == element?.id) {
          const delelement = targetList[0][index - 1] || {};
          // getNavElementId.value = delelement?.id || null;
          currentIndexLitems.value = index - 1;
          index - 1 != 0 && handleCategoryNav(index - 1, delelement);
        }
      }

      if (
        targetList.some((item) => item.includes('非大厅分类列表')) ||
        targetList.some((item) => item.includes('大厅列表导航列表'))
      ) {
        // console.log('111非大厅分类列表 大厅列表导航列表',currentIndexNaveItems.value,element?.id)
        if (currentIndexNaveItems.value == index) {
          const delelement = targetList[0][index - 1] || null;
          currentIndexNaveItems.value = index - 1 < 0 ? null : index - 1;
          console.log(111, '大厅列表导航列表', index - 1 < 0);
          if (index - 1 < 0) {
            handleCategoryNav(currentIndexLitems.value, current_Navelement.value, 1);
          } else {
            handleCategoryNavItems(currentIndexNaveItems.value, delelement);
          }
        }
      }

      sourceList.length && checkIsMoved('CLOSE_', sourceList, [targetList[0][index]]);
      gameDisableReset();
    } else {
      sourceList.length && checkIsMoved(OPERATE_EVENT.CLOSE, sourceList, ...targetList);
      // sourceList.length && checkIsMoved(OPERATE_EVENT.MOVE, sourceList, ...targetList);
    }
    targetList[0].splice(index, 1);
    isChange.value = true;
  }
  //删除 全部游戏 置灰的效果
  function handleDeleteAllGame(index, targetList) {
    // console.log(111, '删除---', index, targetList);
    checkIsMoved('CLOSE_', gameList.value, [targetList[index]]);
    setTimeout(() => {
      targetList.splice(index, 1);
      gameDisableReset();
      // checkIsMoved(
      //   OPERATE_EVENT.MOVE,
      //   categoryList.value.find((obj) => obj.id === currentNavIndex.value)?.items || [],
      //   getListByIdNavs(currentLobbyIndex.value)[getSelectLobbyIndex.value]?.list,
      // );
    }, 1);
  }
  function handleDeleteRowItem(index, targetList) {
    targetList.splice(index, 1);
    if (getNavesgame_type.value) {
      // setTimeout(() => {
      // checkIsMoved(OPERATE_EVENT.CLOSE, gameList.value, ...targetList);
      checkIsMoved('CLOSE_', gameList.value, targetList);
      // }, 444);
    } else {
      checkIsMoved(OPERATE_EVENT.MOVE, getListById(currentNavIndex.value), targetList);
    }
    gameDisableReset();
    // checkIsMoved(
    //   OPERATE_EVENT.CLOSE,
    //   categoryList.value.find((obj) => obj.id === currentNavIndex.value)?.items || [],
    //   getListByIdNavs(currentLobbyIndex.value)[getSelectLobbyIndex.value].list,
    // );
  }
  function handleDeleteRow(index, ...targetList) {
    console.log(index);
    rowDeleteValue.value = index;
    if (index + 1 !== getListByIdNavs(currentLobbyIndex.value).length) {
      return false;
    }
    const element = targetList[0][index];
    let sourceList: any = [];
    switch (element?.ty) {
      case MOVE_TYPE.T:
        sourceList = recreationList.value;
        break;
      case MOVE_TYPE.P:
        sourceList = platformList.value;
        break;
      case MOVE_TYPE.G:
        sourceList = gameList.value;
        break;
      case MOVE_TYPE.M:
        sourceList = gameMainClassList.value;
        break;
    }

    targetList[0].splice(index, 1);
    //console.log([...targetList][0]);
    if ([...targetList][0].length === 1) {
      getSelectLobbyIndex.value = 0;
    }
    // if (index == getListByIdNavs(currentLobbyIndex.value).length) {
    //   getSelectLobbyIndex.value = getListByIdNavs(currentLobbyIndex.value).length - 1;
    // }
    if (getNavesgame_type.value) {
      setTimeout(() => {
        checkIsMoved('CLOSE_', gameList.value, ...targetList);
        // checkIsMoved(OPERATE_EVENT.CLOSE, gameList.value, ...targetList);
      }, 444);
    } else {
      checkIsMoved(OPERATE_EVENT.CLOSE, sourceList, ...targetList);
    }
    gameDisableReset();
    isChange.value = true;
  }
  function handleDeleteRowApply(index, targetList) {
    console.log(index);
    // rowDeleteValue.value = index;
    if (index + 1 !== targetList.length) {
      return false;
    }
    const element = targetList[index];
    let sourceList: any = [];
    // switch (element?.ty) {
    //   case MOVE_TYPE.T:
    //     sourceList = recreationList.value;
    //     break;
    //   case MOVE_TYPE.P:
    //     sourceList = platformList.value;
    //     break;
    //   case MOVE_TYPE.G:
    //     sourceList = gameList.value;
    //     break;
    //   case MOVE_TYPE.M:
    //     sourceList = gameMainClassList.value;
    //     break;
    // }

    if (applyportActiveRow.value === index) {
      applyportActiveRow.value = index - 1;
      navColRowApply(applyportActiveRow.value);
    }

    targetList.splice(index, 1);
    //console.log([...targetList][0]);
    // if (targetList.length === 1) {
    //   getSelectLobbyIndex.value = 0;
    // }
    // checkIsMoved(OPERATE_EVENT.CLOSE, sourceList, ...targetList);
    isChange.value = true;
  }

  function handleClickCategory(index, element, id?: string, noset?) {
    if (element !== null) current_element.value = {};
    // console.log('111index, id element', index, id, element);
    if (!noset) getNavesgame_type.value = false;
    if (id) {
      index = recreationList?.value.findIndex((el) => el.id === id);
      if (index !== -1) {
        element = recreationList.value[index];
      }
    } else {
      // you
      if (!!index || index == 0) {
        currentIndexNaveItems.value = null;
        currentLobbyIndex.value = null;
        currentIndexLitems.value = null;
      }
      if (currentCategoryIndex.value == index) {
        // currentCategoryIndex.value = null;
        return false;
      }
    }
    currentCategoryCompanyIndex.value = null;
    sidebarIndexRecommended.value = null;
    currentNavIndex.value = element ? element?.id : '0';
    currentCategoryIndex.value = index;
    radioModalRow.value = 1;
    currentCategoryData.value = categoryList.value[index];
    // 这里先注释 因为很卡
    // handleClickPlatform(0);
    // checkIsMoved(
    //   OPERATE_EVENT.CLOSE,
    //   recreationList.value,
    //   categoryList.value[index]?.litems,
    //   categoryList.value[index]?.navs,
    //   categoryList.value[index]?.sidebars,
    //   categoryList.value[index]?.bottoms,
    // );
    if (element?.id == 5) getVenues();
    gameDisableReset();
  }
  function handleClickCategoryCompany(index, element, id?: any) {
    currentCategoryCompanyIndex.value = index;
    getNavesgame_type.value = false;
    if (!id) {
      currentIndexNaveItems.value = null;
      currentLobbyIndex.value = null;
      currentIndexLitems.value = null;
    }

    currentCategoryIndex.value = null;
    sidebarIndexRecommended.value = null;
    currentNavIndex.value = element ? element?.id : '0';
    if (index !== null) {
      // currentIndexNaveItems.value = null;
      // currentLobbyIndex.value- = null;
    }
  }
  //全部添加品牌
  function handleAddAllBrand() {
    const activeList = gameList.value.filter((item) => !item.state);
    const currentCategoryList = categoryList.value[currentCategoryIndex.value].items;
    categoryList.value[currentCategoryIndex.value].items = currentCategoryList.concat(
      cloneDeep(activeList),
    );
    // checkIsMoved(
    //   OPERATE_EVENT.MOVE,
    //   gameList.value,
    //   categoryList.value[currentCategoryIndex.value].items,
    // );
    isChange.value = true;
  }
  // 添加类别
  function handleAddCategory() {
    const obj: any = recreationList.value[recreationList.value.length - 1];
    const items = ref([]);
    recreationList.value.push({ ...obj, id: '', value: '', isEdit: true, items });
  }
  // 删除大厅游戏类别
  function handleHallDelete(index, element) {}
  // 完成编辑类别
  async function handleCompleteCategory(element) {
    if (element.value) {
      const { data, status } = await updateCategoryName({
        id: element?.id,
        name: tagNameTitle.value,
        lang: languageModal.value,
      });
      if (status) {
        element.isEdit = false;
        message.success(data);
      } else {
        message.error(data);
      }
    } else {
      message.error(`$t('table.system.system_name_category')`);
    }
  }
  // 删除
  async function handleDelCategory(index) {
    const { data, status } = await delGameCategory({ id: categoryList.value[index].id });
    if (status) {
      message.success(data);
      categoryList.value.splice(index, 1);
    } else {
      message.error(data);
    }
  }
  function handleChildElement(item) {
    //activeState.value = true;
    const arr = item.value?.length ? item.value.filter((item) => !item.state) : [];
    let uniqueItems = [];
    arr.forEach((item) => {
      // 检查 uniqueItems 数组中是否已经存在相同 id 的项目
      if (!uniqueItems.some((uniqueItem: any) => uniqueItem.id === item.id)) {
        // 如果不存在，则将此项目添加到 uniqueItems 数组中
        uniqueItems.push(item as never);
      }
    });
    multipleSelect.value = uniqueItems;
  }
  function handleChildElementGame(item) {
    const arr = item.value?.length ? item.value.filter((item) => !item.state) : [];
    let uniqueItems = [];
    arr.forEach((item) => {
      // 检查 uniqueItems 数组中是否已经存在相同 id 的项目
      if (!uniqueItems.some((uniqueItem: any) => uniqueItem.id === item.id)) {
        // 如果不存在，则将此项目添加到 uniqueItems 数组中
        uniqueItems.push(item as never);
      }
    });
    multipleSelectGame.value = uniqueItems;

    // console.log(111223,multipleSelectGame.value)
  }
  // 多个添加
  function multipleAdd() {
    let currentCategory =
      categoryList.value.find((obj) => obj.id === currentNavIndex.value) || current_element.value;
    let currentCategoryList = currentCategory.items;
    // console.log(111221,currentCategory)
    openConfirm(
      '操作确认',
      '是否批量添加选中的' +
        multipleSelect.value.length +
        '款游戏到“' +
        (currentCategory.name || '游戏') +
        '” 分类的全部游戏？',
      () => {
        if (currentNavIndex.value === '100') {
          let recomendList =
            categoryList.value.find(
              (obj) => obj.id === currentNavIndex.value && obj.game_type == recommendActive.value,
            ).items || [];
          categoryList.value.find(
            (obj) => obj.id === currentNavIndex.value && obj.game_type == recommendActive.value,
          ).items = recomendList.concat(cloneDeep(multipleSelect.value));
        } else if (getNavesgame_type.value) {
          getListByIdNavs(currentLobbyIndex.value)[getSelectLobbyIndex.value].list =
            getListByIdNavs(currentLobbyIndex.value)[getSelectLobbyIndex.value].list.concat(
              cloneDeep(multipleSelect.value),
            );
        } else {
          categoryList.value.find((obj) => obj.id === currentNavIndex.value).items =
            currentCategoryList.concat(cloneDeep(multipleSelect.value));
        }
        multipleSelect.value = [];
        message.success('添加成功');
        isChange.value = true;
        if (getNavesgame_type.value) return gameDisableReset();
        checkIsMoved(
          OPERATE_EVENT.MOVE,
          gameList.value,
          categoryList.value.find((obj) => obj.id === currentNavIndex.value)?.items || [],
        );
      },
      '',
    );
  }
  async function handleClickgame_type(index, type = null) {
    //可选参数
    // console.log(type);
    //console.log(index, '切换pi ni pai z z');
    getVenueId.value = plateFormAllVenues.value[index].venue_id;
    //console.log(index);
    //getListChild.value = value
    // console.log(plateFormAllVenues.value);
    resetData();

    currentgame_typeIndex.value = index;
    let gameSubList: any = plateFormAllVenues.value[index]?.data;
    const list: any = gameSubList ? gameSubList : [];
    const arr = langrageArr.filter((item) => {
      return item.value === languageModal.value;
    });
    if (list) {
      platformList.value = list?.map((item) => {
        // console.log(item, 'item');
        return {
          ...item,
          id: item.id,
          logo: item.nav || item.logo,
          value: item[`${arr[0].language}name`],
          isEdit: false,
          ty: 2,
          name: item.zh_name ? item.zh_name : item.name,
          platform_id: item.platform_id ? item.platform_id : '',
          venue_id: item.venue_id ? item.venue_id : '',
        };
      });
      //platformList.value.unshift(plateFormAllVenues.value[index]);
      let first_data = plateFormAllVenues.value[index];
      getFirstListGame.value = [
        {
          ...first_data,
          id: '3' + first_data.id || '3' + first_data.venue_id,
          cid: '3' + first_data.id || '3' + first_data.venue_id,
          logo: first_data.nav || first_data.logo,
          value: first_data.zh_name ? first_data.zh_name : first_data.name,
          isEdit: false,
          ty: 2,
          ty_true: 3,
          name: first_data.zh_name ? first_data.zh_name : first_data.name,
          platform_id: first_data.platform_id ? first_data.platform_id : '',
          venue_id: first_data.venue_id ? first_data.venue_id : '',
        },
      ];
      console.log(111, ' platformList.value', platformList.value, getFirstListGame.value);

      // checkIsMoved(
      //   OPERATE_EVENT.CLOSE,
      //   platformList.value,
      //   categoryList.value[currentCategoryIndex.value]?.litems,
      //   categoryList.value[currentCategoryIndex.value]?.navs,
      // );
      if (currentCategoryIndex.value === 0) {
        // checkIsMoved(
        //   OPERATE_EVENT.CLOSE,
        //   platformList.value,
        //   categoryList.value[currentCategoryIndex.value]?.litems,
        //   categoryList.value[currentCategoryIndex.value]?.navs,
        // );
      } else {
        // checkIsMoved(
        //   OPERATE_EVENT.CLOSE,
        //   platformList.value,
        //   categoryList.value[currentCategoryIndex.value]?.items,
        // );
      }
      // checkIsMoved(
      //   OPERATE_EVENT.CLOSE,
      //   getListByIdNavs(currentLobbyIndex.value)[getSelectLobbyIndex.value].list,
      //   getListById(currentNavIndex.value),
      // );
      // handleClickPlatform(null);
      if (type !== 'game_type' && type !== 'gamePlate') {
        searchLoading.value = true;
        await handleClickPlatformFirst(0);
        searchLoading.value = false;
      }

      //checkIsMoved(OPERATE_EVENT.CLOSE, gameList.value, getListById(currentNavIndex.value));
    } else {
      platformList.value = [];
    }
  }
  async function handleClickPlatformFirst(index) {
    getFirstListGameIndex.value = index;
    currentPlatformIndex.value = null;

    //handleClickPlatform(null)
    // getPlateFormApi();
    await getPlateFormApi1();
    // disableReset();
  }
  // 点击游戏平台获取游戏列表
  async function handleClickPlatform(index) {
    console.log(111, index, getVenueId.value);
    if (index === null) {
      getFirstListGameIndex.value = 0;
    } else {
      getFirstListGameIndex.value = null;
    }
    if (index !== currentPlatformIndex.value) {
      resetData();
    }

    //console.log(222,platformList.value);
    plateFormState.value = false;
    currentPlatformIndex.value = index;
    currentPlatformData.value = platformList.value[currentPlatformIndex.value];
    currentPlatformDataId.value = currentPlatformData.value?.id;
    searchLoading.value = true;
    //const platform_id: any = currentPlatformData.value?.id;
    getPlateFormApi1();
    // disableReset();
  }
  async function getPlateFormApi1() {
    const response = await getSearchGameAllList({
      // game_type: game_type,
      online: 1,
      venue_id: getVenueId.value || '101',
      platform_id: getFirstListGameIndex.value === 0 ? null : currentPlatformDataId.value,
      lang: languageModal.value,
    });
    searchLoading.value = false;
    const list: any = response;
    if (list) {
      gameList.value = list.map((item) => {
        return {
          ...item,
          value: item.name,
          ty: MOVE_TYPE.G,
          type: 'game-bottom',
        };
      });

      let item = gameList.value.splice(
        Math.max(
          gameList.value.findIndex(
            (item) => (item.game_id == 0 && item.game_type == 1) || item.name.includes('大厅'),
          ),
          0,
        ),
        1,
      )[0]; //
      // console.log(111, 'item', item);
      gameList.value.unshift(item); //

      console.log(111, 'listttt', gameList.value);
      if (getListByIdNavs(currentLobbyIndex.value).length === 1) {
        getSelectStyle.value = 0;
      }
      const newArray = [];
      getListByIdNavs(currentLobbyIndex.value).forEach((subArray) => {
        Object.values(subArray.list).forEach((item) => {
          newArray.push(item as never);
        });
      });

      gameDisableReset();
    }
  }
  // 重置
  function gameDisableReset() {
    setTimeout(() => {
      if (currentNavIndex.value == 100) {
        checkIsMoved(
          OPERATE_EVENT.MOVE,
          gameList.value,
          recommendGetListById(currentNavIndex.value),
        );
      } else {
        if (currentNavIndex.value == 5) return;
        checkIsMoved(OPERATE_EVENT.MOVE, gameList.value, getListById(currentNavIndex.value));
        checkIsMoved(
          OPERATE_EVENT.MOVE,
          categoryList.value.find((obj) => obj.id === currentNavIndex.value)?.items || [],
          getListByIdNavs(currentLobbyIndex.value)[getSelectLobbyIndex.value]?.list,
        );
      }
      if (getNavesgame_type.value) {
        checkIsMoved(
          OPERATE_EVENT.MOVE,
          gameList.value,
          getListByIdNavs(currentLobbyIndex.value)[getSelectLobbyIndex.value]?.list,
        );
      }
    }, 455);
  }
  function gameDisableDel() {
    setTimeout(() => {
      if (currentNavIndex.value == 100) {
        checkIsMoved(
          OPERATE_EVENT.CLOSE,
          gameList.value,
          recommendGetListById(currentNavIndex.value),
        );
      } else {
        checkIsMoved(OPERATE_EVENT.CLOSE, gameList.value, getListById(currentNavIndex.value));

        // checkIsMoved(
        //   OPERATE_EVENT.CLOSE,
        //   categoryList.value.find((obj) => obj.id === currentNavIndex.value)?.items || [],
        //   getListByIdNavs(currentLobbyIndex.value)[getSelectLobbyIndex.value]?.list,
        // );
      }
    }, 455);
  }
  function disableReset() {
    checkIsMoved(OPERATE_EVENT.MOVE, gameList.value, getListById(currentNavIndex.value));
  }
  // 添加所有
  function handleAddAllGame() {
    let currentCategory =
      categoryList.value.find((obj) => obj.id === currentNavIndex.value) || current_element.value;
    openConfirm(
      '操作确认',
      '是否批量添加所有游戏到“' + (currentCategory.name || '游戏') + '” 分类的全部游戏？',
      () => {
        const activeList = gameList.value.filter((item) => !item.state);
        const currentCategoryList =
          categoryList.value.find((obj) => obj.id === currentNavIndex.value)?.items ?? [];

        if (currentNavIndex.value === '100') {
          let recomendList =
            categoryList.value.find(
              (obj) => obj.id === currentNavIndex.value && obj.game_type == recommendActive.value,
            ).items || [];
          categoryList.value.find(
            (obj) => obj.id === currentNavIndex.value && obj.game_type == recommendActive.value,
          ).items = recomendList.concat(cloneDeep(activeList));
          console.log(recomendList);
        } else if (getNavesgame_type.value) {
          getListByIdNavs(currentLobbyIndex.value)[getSelectLobbyIndex.value].list =
            getListByIdNavs(currentLobbyIndex.value)[getSelectLobbyIndex.value].list.concat(
              cloneDeep(activeList),
            );
        } else {
          let objC = categoryList.value.find((obj) => obj.id === currentNavIndex.value);
          if (objC) objC.items = currentCategoryList.concat(cloneDeep(activeList));
        }

        isChange.value = true;

        checkIsMoved(
          OPERATE_EVENT.MOVE,
          gameList.value,
          categoryList.value.find((obj) => obj.id === currentNavIndex.value)?.items || [],
        );
        gameDisableReset();
      },
      '',
    );
  }

  function handleAddAllGame_row() {
    // console.log(111,getSelectLobbyIndex.value,multipleSelectGame.value);
    // const chineseDigits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
    openConfirm(
      '操作确认',
      '是否批量添加选中的' +
        multipleSelectGame.value.length +
        '款游戏到分类行第' +
        toChineseNumberString(getSelectLobbyIndex.value + 1) +
        '排？',
      () => {
        let exetId = false;
        multipleSelectGame.value.forEach((_) => {
          console.log(_);
          exetId = getListByIdNavs(currentLobbyIndex.value)[getSelectLobbyIndex.value].list.find(
            (item) => item.id_ || item.id === _.id,
          );
        });
        if (exetId) {
          message.error('不能重复添加');
          return false;
        } else {
          let currentCategoryList = getListByIdNavs(currentLobbyIndex.value)[
            getSelectLobbyIndex.value
          ].list;
          getListByIdNavs(currentLobbyIndex.value)[getSelectLobbyIndex.value].list =
            currentCategoryList
              .concat(cloneDeep(multipleSelectGame.value))
              .filter((item, index, self) => index === self.findIndex((t) => t.id === item.id));
          //console.log(getListByIdNavs(currentLobbyIndex.value)[getSelectLobbyIndex.value].list)
          multipleSelectGame.value = [];
          message.success('添加成功');
        }

        isChange.value = true;
        checkIsMoved(
          OPERATE_EVENT.MOVE,
          categoryList.value.find((obj) => obj.id === currentNavIndex.value)?.items || [],
          getListByIdNavs(currentLobbyIndex.value)[getSelectLobbyIndex.value]?.list,
        );
      },
      '',
    );
  }

  function handleDelAllGame() {
    openConfirm(
      '操作确认',
      '是否确定移除所有数据',
      () => {
        setTimeout(() => {
          if (currentNavIndex.value == 100) {
            setTimeout(() => {
              checkIsMoved('CLOSE_', gameList.value, recommendGetListById(currentNavIndex.value));
              gameDisableReset();
            }, 333);

            let foundObject = categoryList.value.filter(
              (obj) => obj.id === '100' && obj.game_type == recommendActive.value,
            );
            if (foundObject && foundObject[0].items) {
              foundObject[0].items = [];
            }
          } else if (currentNavIndex.value == 5) {
            // checkIsMoved('CLOSE_', gameList.value, recommendGetListById(currentNavIndex.value));
            let foundObject = getListByApply_port(applyportActiveRow.value)[
              applyportActiveRow.value
            ];
            // console.log(111223,foundObject)
            if (foundObject && foundObject.list) foundObject.list = [];
          } else {
            checkIsMoved(
              'CLOSE_',
              gameList.value,
              categoryList.value.find((obj) => obj.id === currentNavIndex.value).items,
            );

            // checkIsMoved(
            //   'CLOSE_',
            //   categoryList.value.find((obj) => obj.id === currentNavIndex.value)?.items || [],
            //   getListByIdNavs(currentLobbyIndex.value)[getSelectLobbyIndex.value]?.list,
            // );
            categoryList.value.find((obj) => obj.id === currentNavIndex.value).items = [];
            gameDisableReset();
          }

          // checkIsMoved(
          //   OPERATE_EVENT.CLOSE,
          //   gameList.value,
          //   categoryList.value.find((obj) => obj.id === currentNavIndex.value)?.items || [],
          // );

          isChange.value = true;
        }, 455);
      },
      '',
    );
  }
  function handleRmoveRow() {
    const row = getSelectLobbyIndex.value + 1;
    openConfirm(
      '操作确认',
      `是否确定移除第${row}行数据`,
      () => {
        const currentNavObject = categoryList.value.find((obj) => obj.id == getNavElementId.value);
        const foundObject = currentNavObject?.litems.find(
          (obj) => obj.id == currentLobbyIndex.value,
        );
        // console.log(
        //   getListByIdNavs(currentLobbyIndex.value)[getSelectLobbyIndex.value].list,
        //   'currentNavObject',
        // );
        getListByIdNavs(currentLobbyIndex.value)[getSelectLobbyIndex.value].list = [];
        checkIsMoved(
          OPERATE_EVENT.MOVE,
          categoryList.value.find((obj) => obj.id === currentNavIndex.value)?.items || [],
          getListByIdNavs(currentLobbyIndex.value)[getSelectLobbyIndex.value]?.list,
        );
        gameDisableReset();
        getSelectStyle.value = 0;
        //getSelectLobbyIndex.value = 0;
        isChange.value = true;
      },
      '',
    );
  }
  function handleSearchGameList() {
    scrollToFirstItem();
  }

  function scrollToFirstItem() {
    nextTick(() => {
      if (filteredItems.value.length > 0 && listRef.value) {
        listRef.value.scrollTo({
          top: listRef.value.firstChild.children[filteredItems.value[0]._index].offsetTop,
          behavior: 'smooth',
        });
      } else {
        if (searchGameName.value === '') {
          return;
        }
        message.error('未查到该游戏');
      }
    });
  }

  const change_over = () => {
    fold_row.value = !fold_row.value;
  };

  const change_over1 = () => {
    fold_game.value = !fold_game.value;
  };

  function handleToSubGame() {
    $router.push({ name: 'SubGameSort' });
  }

  // 打开 编辑
  function handleEditSort() {
    // checkIsMoved(
    //   OPERATE_EVENT.MOVE,
    //   recreationList.value,
    //   categoryList.value[currentTopIndex.value]?.litems,
    //   categoryList.value[currentTopIndex.value]?.navs,
    //   categoryList.value[currentTopIndex.value]?.sidebars,
    //   categoryList.value[currentTopIndex.value]?.bottoms,
    // );

    handleInfo_game();
    PAGE_EDIT.value = true;
    disabledTab.value = true;
    disabledLangrage.value = true;
    // firstHandle(firstNavIndex.value);
  }

  // 取消
  function handleCancelSort(index) {
    disabledTab.value = false;
    disabledLangrage.value = false;
    // currentCategoryIndex.value = false;
    // currentIndexNaveItems.value = false;
    // 关闭并重新请求数据渲染
    if (isChange.value) {
      openConfirm(
        '操作确认',
        '内容有变动，取消将不会保存，确认取消吗？',
        () => {
          PAGE_EDIT.value = false;
          if (isNumber(index)) {
            currentTopIndex.value = index;
          }
          console.log(currentTopIndex.value, languageModal.value, 'currentTopIndex.value');
          switch (currentTopIndex.value) {
            case 0:
              getCategoryList(languageModal.value, true);
              break;
            case 1:
              getCategorySport();
              break;
          }
          getVenues();
          isChange.value = false;
        },
        '',
      );
    } else {
      PAGE_EDIT.value = false;
      if (isNumber(index)) {
        currentTopIndex.value = index;
      }
      switch (currentTopIndex.value) {
        case 0:
          //getCategoryIndex();
          break;
        case 1:
          getCategoryList(languageModal.value);
          break;
        case 2:
          getCategorySport();
          break;
      }
    }
  }

  // 保存
  async function handleSaveSort() {
    isChange.value = false;
    disabledTab.value = false;
    disabledLangrage.value = false;
    saveLoadingButton.value = true;
    switch (currentTopIndex.value) {
      //case 0:
      //saveIndexPage();
      //break;
      case 0:
        saveCategory();
        break;
      case 1:
        saveSport();
        break;
    }
  }
  // 首页
  async function saveIndexPage() {
    saveLoading.value = true;
    const params = topNavList.value[currentTopIndex.value].items?.map((item: any) => {
      return { id: item.id, name: item.value };
    });
    const { data, status } = await updateGameCategoryIndex(params);
    if (status) {
      saveLoading.value = false;
      message.success(data);
      PAGE_EDIT.value = false;
      //getCategoryIndex();
    } else {
      message.error(data);
    }
  }

  let venueData = {};
  const dataHandle = function (items) {
    var data: any = { h5: [], pc: [] };
    let { h5, pc } = items;
    // console.log(23332111,h5,pc)
    h5 = h5?.map((item0) => {
      let dataitem = item0.list.map((item) => {
        return {
          id: item.id ? item.id : item.platform_id,
          platform_id: item.platform_id,
          logo: item.logo,
          icon: item.logo,
          //game_type: String(item.game_type),
          lang: languageModal.value,
          name: item.zh_name ? item.zh_name : item.name,
          is_hot: item.is_hot !== 'null' ? String(item.is_hot) : '0',
          is_new: item.is_new !== 'null' ? String(item.is_new) : '0',
        };
      });
      // console.log(22111, 'h5', dataitem);
      return dataitem;
    });
    pc = pc?.map((item0) => {
      let dataitem = item0.list.map((item) => {
        return {
          id: item.id ? item.id : item.platform_id,
          platform_id: item.platform_id,
          logo: item.logo,
          icon: item.logo,
          //game_type: String(item.game_type),
          lang: languageModal.value,
          name: item.zh_name ? item.zh_name : item.name,
          is_hot: item.is_hot !== 'null' ? String(item.is_hot) : '0',
          is_new: item.is_new !== 'null' ? String(item.is_new) : '0',
        };
      });
      return dataitem;
    });
    data.h5 = h5;
    data.pc = pc;
    // console.log(22111, 'data', data);
    venueData = data;
    return [];
  };
  // 保存 娱乐城
  async function saveCategory() {
    const params: any = {
      lobby: null,
      cates: [],
      venue: {},
    };
    console.log('12111保存categoryList.value', categoryList.value);
    categoryList.value.forEach((item) => {
      if (item.id === '1') {
        const items = item?.litems?.map((item) => {
          return item.ty === 1 || Number(item.id) > 100
            ? {
                ty: Number(item.id) > 100 ? item.ty_true || item.ty || 1 : item.ty_true || item.ty,
                cid: item.id_true || item.id,
                id: item.id_true || item.id,
                platform_id: '0',
                icon: item.nav || item.logo,
                name: item.zh_name ? item.zh_name : item.name,
                is_hot: String(item.is_hot ? item.is_hot : 0),
                venue_id: item.venue_id,
                item_navs: item?.item_navs?.length
                  ? item?.item_navs?.map((arr) => {
                      return [
                        ...(arr.list
                          ? arr.list.map((item) => ({
                              id: item.id ? item.id : item.platform_id,
                              platform_id: item.platform_id || item.id,
                              platform_name: item.platform_name,
                              logo: item.nav || item.logo || '',
                              icon: item.nav || item.logo || '',
                              lang: languageModal.value,
                              name: item.zh_name ? item.zh_name : item.name,
                              is_hot: item.is_hot !== 'null' ? String(item.is_hot) : '0',
                              is_new: item.is_new !== 'null' ? String(item.is_new) : '0',
                            }))
                          : []),
                      ];
                    })
                  : null,
              }
            : {
                id: item.id_true || item.id,
                ty: item.ty_true || item.ty,
                cid: item.id_true || item.id || '0',
                platform_id: item.id,
                icon: item.logo,
                venue_id: item.venue_id,
                name: item.zh_name ? item.zh_name : item.name,
                is_hot: String(item.is_hot ? item.is_hot : 0),
              };
        });

        const navs = item?.navs?.map((item) => {
          return item.ty === 1
            ? {
                ty: item.ty,
                cid: item.id,
                id: item.id_true || item.id,
                platform_id: '0',
                icon: item.logo,
                lang: languageModal.value,
                name: item.zh_name ? item.zh_name : item.name,
              }
            : {
                ty: item.ty_true || item.ty,
                cid: item.id_true || item.id,
                id: item.id_true || item.id,
                platform_id: item.id_true || item.id,
                icon: item.logo,
                lang: languageModal.value,
                name: item.zh_name ? item.zh_name : item.name,
                venue_id: item.venue_id ? item.venue_id : '',
              };
        });
        const lobby_item = navs.filter((item) => item.id == 1);
        // console.log(lobby_item, navs, 111);
        if (lobby_item.length == 0) {
          navs.unshift({
            cid: '1',
            icon: '/images/CATE/lobby.webp',
            id: '1',
            lang: 'zh_CN',
            name: '大厅',
            platform_id: '0',
            ty: 1,
          });
        }
        const sidebars = item?.sidebars?.map((item) => {
          return item.ty === 1
            ? {
                ty: item.ty,
                cid: item.id_true || item.id,
                id: item.id_true || item.id,
                platform_id: '0',
                icon: item.logo,
                lang: languageModal.value,
                //name: item.name,
                name: item.zh_name ? item.zh_name : item.name,
              }
            : {
                ty: item.ty_true || item.ty,
                id: item.id_true || item.id,
                cid: item.id_true || item.id,
                icon: item.logo,
                platform_id: item.id_true || item.id,
                lang: languageModal.value,
                //name: item.name,
                name: item.zh_name ? item.zh_name : item.name,
              };
        });
        const bottoms = item?.bottoms?.map((item) => {
          return item.ty === 1
            ? {
                ty: item.ty,
                cid: item.id_true || item.id,
                id: item.id_true || item.id,
                platform_id: '0',
                icon: item.logo,
                lang: languageModal.value,
                //name: item.name,
                name: item.zh_name ? item.zh_name : item.name,
              }
            : {
                ty: item.ty,
                cid: '0',
                icon: item.logo,
                platform_id: item.id,
                lang: languageModal.value,
                //name: item.name,
                name: item.zh_name ? item.zh_name : item.name,
              };
        });
        const data = {
          id: item.id_true || item.id,
          navs: navs ? navs : null,
          litems: items ? items : null,
          sidebars: sidebars ? sidebars : null,
          bottoms: bottoms ? bottoms : null,
          lang: languageModal.value,
          [`${languageName.value}_name`]: item.name,
          itemNavs: [],
        };
        params.lobby = data;
      } else {
        // console.log(111,item)
        const items =
          item.id === '5'
            ? dataHandle(item?.items)
            : item?.items?.map((item) => {
                return {
                  id: item.id ? item.id : item.platform_id,
                  platform_id: item.platform_id,
                  logo: item.logo,
                  icon: item.logo,
                  //game_type: String(item.game_type),
                  lang: languageModal.value,
                  name: item.zh_name ? item.zh_name : item.name,
                  is_hot: item.is_hot !== 'null' ? String(item.is_hot) : '0',
                  is_new: item.is_new !== 'null' ? String(item.is_new) : '0',
                };
              }) || [];
        const navs = item?.navs?.map((item) => {
          //const nameObject = getLanguageObject('name', item);
          return {
            ty: item.ty_true || item.ty,
            id: item.id_true || item.id,
            cid: item.id_true || item.id,
            platform_id: item.platform_id || item.id_true || item.id,
            logo: item.logo,
            //...nameObject,
            // name: item.name,
            lang: languageModal.value,
            name: item.zh_name ? item.zh_name : item.name,
            venue_id: item.venue_id ? item.venue_id : '',
          };
        });

        // const item_navs = item?.item_navs?.map((arr) => {
        //   return [
        //     ...(arr.list
        //       ? arr.list.map((item) => ({
        //           id: item.id ? item.id : item.platform_id,
        //           platform_id: item.platform_id,
        //           logo: item.logo,
        //           icon: item.logo,
        //           lang: languageModal.value,
        //           name: item.zh_name ? item.zh_name : item.name,
        //           is_hot: item.is_hot !== 'null' ? String(item.is_hot) : '0',
        //           is_new: item.is_new !== 'null' ? String(item.is_new) : '0',
        //         }))
        //       : []),
        //   ];
        // });

        const litems = item?.litems?.map((item) => {
          return {
            ty: item.ty_true || item.ty || 1,
            cid: item.id ? item.id_true || item.id : item.cid,
            id: item.id ? item.id_true || item.id : item.platform_id,
            platform_id: item.platform_id ? item.platform_id : item.id_true || item.cid || item.id,
            logo: item.logo,
            icon: item.logo,
            lang: languageModal.value,
            name: item.name,
            venue_id: item.venue_id,
            item_navs: item?.item_navs?.length
              ? item?.item_navs?.map((arr) => {
                  return [
                    ...(arr.list
                      ? arr.list.map((item) => ({
                          id: item.id ? item.id_true || item.id : item.platform_id,
                          platform_id: item.platform_id || item.id_true || item.id,
                          logo: item.nav || item.logo || '',
                          icon: item.nav || item.logo || '',
                          lang: languageModal.value,
                          name: item.zh_name ? item.zh_name : item.name,
                          is_hot: item.is_hot !== 'null' ? String(item.is_hot) : '0',
                          is_new: item.is_new !== 'null' ? String(item.is_new) : '0',
                          platform_name: item.platform_name ? item.platform_name : '',
                        }))
                      : []),
                  ];
                })
              : null,
          };
        });

        const data = {
          ty: String(item.ty),
          id: item.id_true || item.id,
          navs: navs ? navs : null,
          items: items ? items : null,
          logo: item.logo,
          lang: languageModal.value,
          [`${languageName.value}_name`]: item.name,
          litems: litems,
          game_type: item.game_type ? item.game_type + '' : '0',
        };
        if (item.id != '5') {
          params.cates.push(data);
        }
      }
    });
    params.venue = venueData;

    childGame();
    updateSortBrand();
    //1.愿数组转换如图的格式2.当前的数组替换愿数组
    saveLoading.value = true;
    console.log(params, '111参数传入');
    // return;
    try {
      const { data, status } = await updateGameCategoryItem([params]);
      if (status) {
        setTimeout(() => {
          saveLoading.value = false;
          message.success(data);
          saveLoadingButton.value = false;
          PAGE_EDIT.value = false;
          disabledTab.value = false;
          getCategoryList(languageModal.value, true);
          disabledLangrage.value = false;
          getVenues();
          checkIsMoved(
            OPERATE_EVENT.MOVE,
            recreationList.value,
            categoryList.value[currentTopIndex.value]?.litems,
            categoryList.value[currentTopIndex.value]?.navs,
            categoryList.value[currentTopIndex.value]?.sidebars,
            categoryList.value[currentTopIndex.value]?.bottoms,
          );
          // firstHandle(0);
        }, 800);
      } else {
        saveLoadingButton.value = false;
        message.error(data);
      }
    } catch (error) {
      // 在这里处理捕获的异常
      saveLoadingButton.value = false;
      // 在这里执行适当的错误处理逻辑
    }
  }
  async function childGame() {
    //saveLoading.value = true;
    const paramsGame = {
      platform_id: currentPlatformData.value?.id,
      data: [],
      venue_id: getVenueId.value,
    };
    paramsGame.data = gameList.value.map((item) => {
      return { id: item.id };
    });
    paramsGame.platform_id = platformList.value[currentPlatformIndex.value]?.id;
    paramsGame.lang = languageModal.value;
    const { data, status } = await updateGameBacthSorting(paramsGame);
    if (status) {
      saveLoading.value = false;
      handleClickPlatform(currentPlatformIndex.value);
      message.success(data);
    } else {
      message.error(data);
    }
    //1.愿数组转换如图的格式2.当前的数组替换愿数组
    //saveLoading.value = true;
  }
  //全部品牌排序
  async function updateSortBrand() {
    const paramsGame = {
      venue_ids: [],
    };
    getVenuesData.value.forEach((item) => {
      paramsGame.venue_ids.push(item.platform_id as never);
    });
    const { data, status } = await updateVenuesSort(paramsGame);
    if (status) {
      message.success(data);
    }
    console.log(paramsGame);
  }
  //大厅导航删除
  function handleNavDelete(index, element) {
    element.splice(index, 1);
  }
  //转换为lobby和cates的形式方法
  function changeArrayFuntion(val) {
    const resultArray = [];
    val.map((itemFirst: any) => {
      const lobbyItem = itemFirst.data.find((item) => item.id === '1');
      if (lobbyItem) {
        const lobbyStructure: any = {
          lobby: {
            ...lobbyItem,
          },
          cates: itemFirst.data.filter((item) => item.id !== '1').map((item) => ({ ...item })),
        };
        lobbyStructure[`${languageName.value}_'name'`] = lobbyStructure.name;
        resultArray.push(lobbyStructure as never);
      }
    });
    return resultArray;
  }
  // 保存体育
  async function saveSport() {
    //disabledLangrage.value = false;
    saveLoading.value = true;
    const params = topNavList.value[currentTopIndex.value].items?.map((item: any) => {
      return { id: item.id };
    });
    const { data, status } = await updateGameCategorySports(params);
    if (status) {
      saveLoading.value = false;
      message.success(data);
      PAGE_EDIT.value = false;
      // getCategorySport();
    } else {
      message.error(data);
    }
  }
  //监听窗口事件

  onMounted(async () => {
    nextTick(() => {
      window.addEventListener('resize', () => {
        const currentWidth = document.body.clientWidth;
        currentwindowWidth.value = currentWidth;
      });
    });
  });
  const bigClassOrSmall = computed(() => {
    return currentwindowWidth.value > 1680 ? true : false;
  });
  watchEffect(() => {
    const currentWidth = document.body.clientWidth;
    currentwindowWidth.value = currentWidth;
  });
  // function commonFuntion(val) {
  //   const params: any = {
  //     lobby: null,
  //     cates: [],
  //   };
  //   val.forEach((item) => {
  //     const items = item.items.map((item) => {
  //       //const nameObject = getLanguageObject('name', item);
  //       return { id: item.id, platform_id: item.platform_id };
  //     });
  //     const data = {
  //       id: item.id,
  //       navs: null,
  //       items: items,
  //     };
  //     params.cates.push(data);
  //   });
  // }
  onMounted(() => {
    getPlateFormAll();
    setTimeout(() => {
      // handleClickCategory(0, recreationList?.value[0]);
    }, 1500);
  });
</script>
<style lang="less" scoped>
  .button-bg-basic {
    background-color: #1475e1;
    color: rgb(0 0 0 / 85%);
    font-size: 14px;
  }

  ::v-deep(
      .ant-tabs-top > .ant-tabs-nav,
      .ant-tabs-bottom > .ant-tabs-nav,
      .ant-tabs-top > div > .ant-tabs-nav,
      .ant-tabs-bottom > div > .ant-tabs-nav
    ) {
    margin: 0;
  }

  .button-bg-basic[disabled] {
    border-color: #d9d9d9 !important;
    background-color: #d9d9d9 !important;
  }

  .widthGame {
    width: 150px;
  }

  .drag-box {
    min-height: 60px;
    max-height: 270px;
    border: 1px solid lighten(@primary-color, 10%);
    border-radius: 6px;
    background-color: #e0e5ef;
  }

  .group-list {
    //min-width: 1000px;
    // width: 800px;
    min-height: 40px;
    //padding-bottom: 40px;
  }

  .move-area {
    padding-bottom: 200px;
  }

  .group-nav {
    flex-wrap: wrap;
    min-width: 1000px;
    max-width: 1200px;
    min-height: 40px;
  }

  .group-nav1 {
    flex-wrap: nowrap;
    min-width: calc(100% - 90px);
    // max-width: 1200px;
    min-height: 40px;
    overflow: scroll hidden;
    gap: 10px;
  }

  .resize-box {
    // height: 270px;
    max-height: 470px;
    resize: vertical;
  }

  .box-size {
    max-height: 270px;

    .flex {
      min-width: 1000px;
      height: 227px;
    }
  }

  .gameSortBox > div:not(.game-type-box) > div > div {
    ::v-deep(.group-item) {
      padding-right: 10px !important;
      padding-left: 0 !important;
    }

    ::v-deep(.group-item > div:not(.is-hot)) {
      // width: 130px;
      padding: 0 !important;
    }

    ::v-deep(.forbid) {
      .active {
        color: #444 !important;
      }
    }

    ::v-deep(.mr-2) {
      margin-right: 0 !important;
    }
  }

  ::v-deep(.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within) {
    box-shadow: none !important;
  }

  .primaryGroup {
    border-radius: 59px;
    background: #fff;

    ::v-deep(.ant-radio-button-wrapper) {
      width: auto;
      margin-right: 10px;
      border: unset !important;
      border-radius: 59px;
      background: #fff;

      span:not(.ant-radio-button) {
        display: inline-block;
        // width: 109px !important;
        font-size: 14px !important;
        text-align: center !important;
        vertical-align: middle;
      }
    }
  }

  ::v-deep(.ant-radio-group) {
    height: 50px;
    padding: 3px;
    border: 1px solid #e1e1e1;
  }

  ::v-deep(.ant-radio-group-large .ant-radio-button-wrapper) {
    height: 42px;
  }

  .gameSortLabel {
    flex: 0 0 90px;
    // margin-bottom: 20px !important;
    color: #444 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: ;
  }

  .gameSortLabelExtral {
    display: flex !important;
    flex: 0 0 90px;
    color: #444 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
  }

  .gameSortLabelExtral1 {
    display: flex !important;
    // flex: 0 0 90px;
    color: #444 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
  }

  .game-type-box > div > div {
    ::v-deep(.group-item) {
      padding: 0 !important;
    }

    ::v-deep(.base-tag) {
      width: 140px !important;
      margin-right: 0 !important;
      //&.active {
      //  background-color: red!important;
      //}
    }

    ::v-deep(.base-tag-text) {
      font-size: 14px !important;
      font-weight: 600 !important;
    }

    ::v-deep(.items-center:first-child > div > div) {
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
    }

    ::v-deep(.items-center:nth-last-child(2) > div > div) {
      border-left: none !important;
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
    }
    //::v-deep(.base-tag:first-child) {
    //  border-radius-top-right: 0!important;
    //  border:1px solid red!important;
    //}
    //.items-center {
    //  border:1px solid blue!important;
    //}
  }

  .resize-box {
    // padding-top: 17px !important;
    // padding-right: 30px !important;
    // padding-left: 30px !important;
    // border: 1px solid #e1e1e1 !important;
    // background-color: #e0e5ef !important;

    // ::v-deep(.group-item > div:not(.is-hot)) {
    //   width: 92px !important;
    //   padding: 0 !important;
    // }

    // ::v-deep(.is-hot) {
    //   position: absolute;
    //   top: 5px;
    //   left: 71px;
    // }

    // ::v-deep(.group-item) {
    //   width: auto !important;
    // }
  }

  ::v-deep(.prefix-icon-move),
  ::v-deep(.prefix-icon) {
    left: -6px !important;
  }
</style>
<style scoped>
  .add-icon {
    color: rgb(64 158 255 / 100%);
    font-size: 20px;
  }

  .primaryGroup .ant-radio-button-wrapper-checked {
    background-color: #1475e1 !important;
    color: #fff !important;
  }

  .primaryGroup .ant-radio-button-wrapper-checked {
    border: 1px solid #aaa !important;
  }

  primarygroup .ant-radio-button-wrapper-checked:hover {
    color: #fff !important;
  }

  .primaryGroup .ant-radio-button-wrapper-disabled {
    color: #000;
  }

  .primaryGroup .ant-radio-button-wrapper:not(:first-child)::before {
    display: none !important;
  }

  .lobbylistBG {
    flex-shrink: 0;
    width: 65vw;
    padding: 0;
    padding-left: 10px;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    background: #e0e5ef;
    text-align: center;
  }

  .lobbylistBGBig {
    flex-shrink: 0;
    width: 61vw;
    padding: 0;
    padding-left: 10px;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    background: #e0e5ef;
    text-align: center;
  }

  .rightlistBG {
    padding: 5px;
    padding-top: 0;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    background: #e0e5ef;
    color: rgb(0 0 0 / 85%);
    text-align: center;

    .group-item {
      padding: 0;
    }
  }

  .unborder {
    border: unset !important;
  }

  .bg_lobbylist {
    background: #e0e5ef !important;
  }

  .bg_lobbylist .itemDrage {
    min-width: 700px;
  }

  .itemDrage .items-center {
    min-width: 100px;
  }

  @media screen and (width >= 800px) and (width <= 1768px) {
    .bg_lobbylist .itemDrage {
      min-width: 1100px;
    }
  }

  .button_default {
    border: unset !important;
    background: #fff !important;
    color: #000 !important;
  }

  .flex100 {
    flex: 0 0 100px !important;
  }

  .opacity0 {
    opacity: 0;
  }

  @keyframes rotate {
    from {
      transform: rotate(180deg);
    }

    to {
      transform: rotate(180deg);
    }
  }

  .rotate_180 {
    transform: rotate(180deg);
  }

  .unforbid .base-tag {
    background-color: #1475e1 !important;
  }

  .lineSort_relative {
    /* width: calc(100% - 68px); */
  }

  .flex1 {
    flex: 1;
  }
</style>
